Select in form - Problem mapping through options, cannot read properties of undefined (reading 'map')

Question

I am creating a SELECT inside a form in which I need to map through an object (I know mapping through an object instead of an array might be a problem). I am using antd to format my code. I would like to know what I am doing wrong.

Right after the React imports I declared my like const networks = [{...},{...},...]

Then my export looks like:

 export class BasicDetails extends Component { state = { selectedOption: null, }; handleChange = selectedOption => { this.setState({ selectedOption }, () => console.log(`Option selected:`, selectedOption), ); };

And my render/return looks like

 render() { const { values, handleChange } = this.props; const { selectedOption } = this.state; return ( <> {/* Chain selector */} <Select style={{ width: 120 }} value={selectedOption} onChange={this.handleChange} Option={this.props.networks.map((network, index) => { return { label: network.name, value: network, key: index, }; })} />

Can anybody help me please? I am a junior dev. :) Thanks

Answer 1

Solved. I was using Option={this.props.networks.map((network, index) instead of Option={this.state.networks.map((network, index)