¿Cómo puedo mostrar la etiqueta de opciones múltiples en mi componente Seleccionar?
Aquí está mi componente:
<Select id='myID' name='myName'> { ( (localStorage.getItem("localStorageKey").includes("John")) ? <option key=1 value=myFirstValue>Option 1</option> : ` "Something else here" ` ) } </Select>Hasta ahora, si pongo solo una opción, funciona, pero si agrego otra, diga:
<Select id='myID' name='myName'> { ( (localStorage.getItem("localStorageKey").includes("John")) ? <option key=1 value=myFirstValue>Option 1</option> + <option key=2 value=mySecondValue>Option 2</option> : ` "Something else here" ` ) } </Select>No mostrará nada
<> <option key=1 value=myFirstValue>Option 1</option> <option key=2 value=mySecondValue>Option 2</option> </>Envuelve tus opciones como esta
Para tener más de un elemento JSX como hermano, debe estar envuelto en un React Fragment o en una matriz.
<> es una abreviatura de <React.Fragment>
<Select id='myID' name='myName'> { (localStorage.getItem("localStorageKey").includes("John")) ? <> <option key={1} value="myFirstValue">Option 1</option> <option key={2} value="mySecondValue">Option 2</option> </> : "Something else here" } </Select>Mediante el uso de matriz,
[<option key={1} value="myFirstValue">Option 1</option>, <option key={2} value="mySecondValue">Option 2</option>]