I'm getting correct values in dropdown but after that when I'm calling onchange, whole array is getting passed as argument. so e has the whole array and not just the value selected this is the code:
const { accountIDs } = this.state;
let accountIDlist =
accountIDs.length > 0 &&
accountIDs.map((item, i) => {
return (
<option key={i} value={item}>
{item}
</option>
);
}, this);
<Select
style={{ width: "100%" }}
defaultValue="188619942792"
autosize={true}
onChange={e => {
debugger;
console.log(e);
this.reset();
this.setAccountID(e);
}}
>
<select value={accountIDlist}>{accountIDlist}</select>
</Select>
You main component should be managing the state, so load in the ids, and initially set selected to nothing. Then pass in the ids and selected state to your Select component. That will iterate over the ids to create the options, and if the id of an option matches that of the selection set the selected property.
const { Component } = React;
class Select extends Component {
render() {
const { ids, selected, handleChange } = this.props;
return (
<select onChange={handleChange}>
<option selected>Choose</option>
{ids.map(id => {
return (
<option
value={id}
selected={selected === id}
>{id}
</option>
);
})}
</select>
);
}
}
class Example extends Component {
constructor(props) {
super();
this.state = { ids: props.ids, selected: '' };
}
handleChange = (e) => {
this.setState({ selected: +e.target.value });
}
render() {
const { ids, selected } = this.state;
return (
<Select
ids={ids}
selected={selected}
handleChange={this.handleChange}
/>
);
}
};
const ids = [1, 2, 3, 4, 5];
ReactDOM.render(
<Example ids={ids} />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div><select
name="account_id"
onChange={handleChange}
>
{props.accountIDList.map((accountId) => <option value={accountId}>{accountId}</option>)}
</select>
You can set the default when you set up state like so... const [accountId, setAccountId] = React.useState(account_id: 188619942792);
the answer to this would be:
<Select
style={{ width: "100%" }}
defaultValue="188619942792"
autosize={true}
value = {accountIDlist}
onChange={e => {
this.reset()
this.setAccountID(e)
}}
>
{accountIDlist}
</Select >
no need of child select component here.