Hi,
I am trying to change second " select" list every time I am changing the first one. But i have error in console that props.list in OptionCreator component is undefined. I tried to alert it after “const” is created but it is correct. I am starting to learn React now and I am confused. I am paste the code below. Help please? Thank you in advance…
const cat=[
{id:1,name:"fruits"},
{id:2,name:"vegtables"},
{id:3,name:"meet"},
{id:4,name:"alkohol"}
]
const fruits=[
{id:1,name:"apples"},
{id:2,name:"bananas"},
{id:3,name:"watermelon"},
{id:4,name:"grapes"},
]
const vegtables=[
{id:1,name:"potatoes"},
{id:2,name:"seleric"},
{id:3,name:"carrot"},
{id:4,name:"onion"},
]
const OptionCreator =(props)=>{
const list=props.list
return(
<select onChange={props.change}>
{list.map(item=><option key={item.id} value={item.name}>{item.name}</option>)}
</select>
)}
class App extends React.Component {
state={
catActual:fruits
}
handleChange=(e)=>{
const actual= e.target.value
alert(actual) // <--showing properly value
this.setState({
catActual:actual
})
//alert(this.state.catActual);
}
render() {return(
<div>
<h1>Lista zakupów</h1>
<OptionCreator list={cat} change={this.handleChange}/>
<OptionCreator list={this.state.catActual}/>
</div>
)}}
ReactDOM.render(<App/>,document.getElementById('app'));