not work `onChange` and not work `setState` in `select` tag. (multiple) in react

Question

I have a select tag containing the optgroup and option tags which is multiple.

When I select the items, the state is not updated and the onChange does not work.

I want the value of the option tag to be transferred to state when the item or items are selected.!!.

const FunctionalComponent = () => {

const [mystate , setMyState] = useState([]);


return(

<div>

     <select
         onChange={(e) => setMyState(e.target.value) }
         className='form-control'
         multiple='multiple'
         value={mystate}
         >
          
          {datas.map((obj) => (
            return (
                 <optgroup key={obj.title} label={obj.title}>
                    {obj.map((o) => (
                        <option key={o.id} value={o.id}>{o.name}</option>
                    ))}
                 </optgroup>
                    );
            ))}
     </select>

</div>


)


}

export default FunctionalComponent

Thanks to those who help me.

Answer 1

Without knowing how datas is structured it's difficult to write code for it, but based on how I think it's structured here some working code.

1. Intialiase state as an array.

2. Have your handler get the selectedOptions , and get each option's value. Add that array to your state.

3. Here datas is an array objects. Each one has a title , and another array of objects containing the option data. map over the main array, and then map over the options array.

 const { useState } = React; function Example({ datas }) { const [mystate, setMyState] = useState([]); function handleChange(e) { const options = e.target.selectedOptions; const values = Array.from(options, option => option.value); setMyState(values); } return ( <div> <select onChange={handleChange} className="form-control" multiple="multiple" value={mystate} >{datas.map(obj => { return ( <optgroup key={obj.title} label={obj.title} >{obj.options.map(obj => { return ( <option key={obj.id} value={obj.id} >{obj.name} </option> ); })} </optgroup> ); })} </select> </div> ); } const datas = [ { title: 1, options: [ { id: 1.1, name: 1.1 }, { id: 1.2, name: 1.2 }, ] }, { title: 2, options: [ { id: 2.1, name: 2.1 }, { id: 2.2, name: 2.2 }, ] }, ]; ReactDOM.render( <Example datas={datas} />, document.getElementById('react') );

 form-control { width: 200px; height: 200px}

 <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>