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
Solved. I was using Option={this.props.networks.map((network, index) instead of Option={this.state.networks.map((network, index)