Reactjs show selected option by object

Use a function to iterate over the options, and use find to check whether the the id and name of the option matches the same properties of an object in the selected array, and use that variable to determine whether the option should be selected or not.

In this working example I've passed the options/selected data into the Example component, and set state with the options data for convenience.

const { useState } = React;

function Example({ data, selected }) {

  const [ options, setOptions ] = useState(data);

  function getSelected() {

    // Iterate over the options, and get the id, and name
    return options.map(option => {

      const { id, name } = option;

      // `found` is a boolean depending on whether the option
      // in the current iteration is in the selected array
      const found = selected.find(obj => {
        return obj.id === id && obj.name === name;
      });

      // And then we can return an option where selected
      // is the result of that boolean, either true or false
      return <option value={option} selected={found}>{name}</option>;
    });
  }

  return (
    <div>
      <select multiple>
        {getSelected()}
      </select>
    </div>
  );
};

const data = [
  {id: 1, name: 'xxx'},
  {id: 2, name: 'yyy'},
  {id: 3, name: 'zzz'},
  {id: 4, name: 'sss'},
  {id: 5, name: 'vvv'},
];

const selected = [
  {id: 1, name: 'xxx'},
  {id: 3, name: 'zzz'},
  {id: 5, name: 'vvv'},
];

ReactDOM.render(
  <Example data={data} selected={selected} />,
  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>

You can do something like this which will result in the solution but it will result in extra steps. To avoid running over the extra steps of checking you can make use of a dictionary.

 const addList = data.map(function (Creator, index) {
    let check = false;
    for (let i = 0; i < selected.length; i++) {
      if (selected[i].id == Creator.id) {
        check = true;
        break;
      }
    }
    return (
      <option key={Creator.id} selected={check}>
        {Creator.name}
      </option>
    );
  });

Below is the one using dictionary

  let newobj = {};

  for(let i=0;i<selected.length;i++){
    newobj[selected[i].id]="selected";
  }

  const addList = data.map(function (Creator, index) {
    return (
      <option key={Creator.id} selected={newobj[Creator.id]==="selected"}>
        {Creator.name}
      </option>
    );
  });

This is the fastest way to do this.

All you need is a function to get the selected options from the dropdown by using the .selectedOptions, this will return all the selected options in your HTML tag at any point in time, you can then use a loop to push the values into an array to arrive at your desired answer. See it below;

export default function App() {

  let data = [
    {id: 1, name: 'xxx'},
    {id: 2, name: 'yyy'},
    {id: 3, name: 'zzz'},
    {id: 4, name: 'sss'},
    {id: 5, name: 'vvv'},
  ];

//function to get selected options
  function getSelected(e){
      var stdOptions = e.target.selectedOptions
      var selected = []
     
//loop to push the selected values into an array
//note that in the HTML sections, important values have been stored in 'id' and 'value' properties, so we can get them here 
      for (var i =0 ; i <stdOptions.length; i++){
        selected.push({
          'id': stdOptions[i].id,
          'name': stdOptions[i].value
        })
      }
      console.log(selected)
  }

  return (
    <div>

      <select  multiple onChange = {getSelected}>
        {data.map((deet, key)=>{
          return (
          <option key = {key} id={deet.id} value={deet.name} > {deet.name} </option>
        )
        })}
      </select>

    </div>
    )
  }