I am facing an issue while trying to insert an icon into a select option. The error message I received is:
Warning: validateDOMNesting(...): cannot appear as a child of
<option>
To indicate that certain fields are required, I am using asterisk icons in all my input fields like this:
<label htmlFor="floatingInput31">
{cli_nome !== '' ? null
:<i className="fa-solid fa-asterisk fa-2xs" style={{color: "#e41607"}} id="icon-asterisco-obrigatorio"></i>
}
E-mail
</label>
However, when I tried to implement the same concept in a select field, I encountered the mentioned error:
<select className="select-cidades" nome='cidades' id='cidade' value={end_cid_id} onChange={salvarCidade}>
{end_cid_id === '' ? <option value='0000000'><i className="fa-solid fa-asterisk"> </i> Escolha a cidade</option>
:
<option value="0000000">Escolha a cidade</option>
}
<option value="0000000">Escolha a cidade</option>
{
cidades.map((city) => {
return <option key={city.cid_id} value={city.cid_id}>{city.cid_nome} - {city.cid_uf_sigla}</option>
})
}
</select>
I have attempted to include the icon code as
<option value='0000000'> Escolha a cidade</option>https://i.stack.imgur.com/wDfue.png
If anyone has a solution or suggestion, please let me know. Thank you!