Tengo dos map anidados en una select , en la parte inferior agrego los elementos de option .
return ( <Modal completion={completion}> <InputGroup title="Program" numOfAsterisks={1}> <Select formState={formState} setFormState={setFormState} name={'type'}> <option value="">- Válassz -</option> {Object.entries(programEventTimes ?? {}) .sort((a, b) => a[0].localeCompare(b[0])) .map(([key, value]) => ( <> {Object.entries(value ?? {}) .sort((a, b) => a[0].localeCompare(b[0])) .map(([key2, value2]) => ( <option value="textField" {key == ticket.eventName && key2 == ticket.startTime && 'checked' }> {key} - {key2} </option> ))} </> ))} </Select> </InputGroup> </Modal> De alguna manera en {key dice:
'...' esperado.
¿Por qué debería usar ... ?
En primer lugar, debe selected y no checked . Luego, debe condicionar haber selected como accesorios.
<option value="textField" selected={key == ticket.eventName && key2 == ticket.startTime}> Tenga en cuenta también que == no se recomienda, y prefiera usar === para evitar errores tipográficos
Significa que si desea pasar el accesorio del objeto al niño, debe usar ... sintaxis como esta
<option value="textField" {...{selected: key == ticket.eventName && key2 == ticket.startTime}}> {key} - {key2} </option> ... es un operador de propagación. En reaccionar ... ayudará a difundir su objeto obj={key:value} <span {...obj} /> en este <span key={value}/>