UNDEFINED variable in component

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? :slight_smile: 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'));

OK, i got it…

in state i need to put catActual:eval(actual) cause it is comming as string.

1 Like