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

user_19120777 0
Viewed 57

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.

react-hooks reactjs javascript
1 Answers

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>

user_13770020
Related