Estaba tratando de agregar un ícono de búsqueda dentro del cuadro de búsqueda. Aquí está mi código hasta ahora:
<div className='search'> <input id="quick_search" className="xs-hide" name="quick_search" placeholder="Search by creator, collectible or collection." type="text" onChange={(e) => { changeKey(e); }} onKeyDown={keyPress} value={keyword} > <i class="fa fa-search" aria-hidden="true"></i> </input> </div> Me enfrento a este error: la entrada es una etiqueta de elemento nula y no debe tener children ni usar dangerouslySetInnerHTML .
Puede alguien ayudarme con esto ? muy apreciado ! Gracias
El elemento de input de React, al igual que el elemento de input de HTML, no puede tener hijos.
Tienes que hacer que el ícono aparezca en el cuadro de entrada usando CSS, no puedes colocarlo como un niño.
.form-field { position: relative; display: inline-block; } .icon { position: absolute; right: 0; } <div class="form-field"> <input> <span class="icon">🔍</span> </div> Además, no cerró la etiqueta <input> . Está mal porque cada etiqueta en reaccionar debe cerrarse usando la etiqueta de cierre </input> o usando una etiqueta de cierre automático <input />
Su código probablemente debería verse así:
<div className='search'> <input id="quick_search" className="xs-hide" name="quick_search" placeholder="Search by creator, collectible or collection." type="text" onChange={(e) => { changeKey(e); }} onKeyDown={keyPress} value={keyword} /> {/* <--- notice `/` here */} <i class="fa fa-search" aria-hidden="true"></i> </div>