Obtuve un objeto llamado data y ya muestro valores como option en select ahora quiero mostrar la opción selected a través del objeto selected , pero no tuve éxito:
let data = [ {id: 1, name: 'xxx'}, {id: 2, name: 'yyy'}, {id: 3, name: 'zzz'}, {id: 4, name: 'sss'}, {id: 5, name: 'vvv'}, ]; let selected = [ {id: 1, name: 'xxx'}, {id: 3, name: 'zzz'}, {id: 5, name: 'vvv'}, ] <select multiple={true}> data.map(function(Creator, index){ return ( <option key={Index}>{Creator.name}</option> ) }); </select>Hice:
{data.map(function(Cr, In){ {selected.map(function (Creator, Index) { return ( <option selected={Creator.name === Cr.name ? true : false} key={In}>{Cr.name}</option> ) })} })} Pero no devuelva la option y supongo que esta no es la mejor práctica, ¿cómo puedo solucionar esto y cuál es la mejor práctica?
Use una función para iterar sobre las opciones, y use find para verificar si la id y el name de la opción coinciden con las mismas propiedades de un objeto en la matriz seleccionada, y use esa variable para determinar si la opción debe seleccionarse o no.
En este ejemplo de trabajo, pasé las opciones/datos seleccionados al componente Ejemplo y establecí el estado con los datos de opciones para mayor comodidad.
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>Puede hacer algo como esto que dará como resultado la solución, pero dará como resultado pasos adicionales. Para evitar pasar por alto los pasos adicionales de verificación, puede utilizar un diccionario.
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> ); });A continuación se muestra el que usa el diccionario.
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> ); });No itere el objeto seleccionado, solo léalos por Índice como este selected[index]
data.map(function(Creator, index){ return ( <option selected={Creator.id === selected[index].id ? true : false}>{Creator.name}</option> ) });