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)