Задача: Есть select в option вывожу через map наименования(name) из объекта и меняю действующий state. После выбора option хочу вывести выбранный Option на экран(<p>{this.props.valueSelect}</p>)
, но он не отображается.
Компанент
import React, { Component } from 'react'
import Check from './conponent/Check'
import List from './conponent/List'
import './App.css';
class App extends Component {
constructor(){
super();
this.state = {
monument: [{
"id" : 1,
"name": "Памятник №1",
"color": ["Blue","Red", "White"],
"width": 300,
"heigth": 100,
"price": 50,
"country": "Russia",
"url": "https://i.ibb.co/Nx8k7NJ/pam1.png"
},
{
"id" : 2,
"name": "Памятник №2",
"color": ["Blue","Red", "White"],
"width": 300,
"heigth": 100,
"price": 50,
"country": "Russia",
"url": "https://i.ibb.co/Nx8k7NJ/pam1.png"
}],
valueSelect: " "
}
}
render() {
return (
<>
<List
monumentObj = {this.state.monument}
valueSelect = {this.state.valueSelect}
/>
</>
);
}
}
Компонент Select.js
export default App;
import React, { Component } from 'react';
export default class Select extends Component {
handleChange = (e) => {
this.setState({
valueSelect: e.target.value
}, () => console.log(this.state.valueSelect))
this.forceUpdate();
}
render () {
return (
<select value = {this.props.valueSelect} onChange={this.handleChange} >
{
this.props.monumentObj.map(i => {
return(
<option key={i.id} value = {i.name}>{i.name}</option>
)
})
}
</select>
)
};
}
Компонент
import React, { Component } from 'react';
import Collage from './Collage'
import Select from './Select'
export default class List extends Component {
render() {
return (
<div className="List">
<Select
monumentObj = {this.props.monumentObj}
/>
<Collage
monumentObj = {this.props.monumentObj}
valueSelect = {this.props.valueSelect}
/>
</div>
);
}
}
Компонент
import React, { Component } from 'react';
export default class Collage extends Component {
render () {
return (
<div>
{
this.props.monumentObj.map(i => {
return (
<>
<h3>{i.name}</h3>
<p>{this.props.valueSelect}</p>
</>
)
})
}
</div>
)
};
}