I was trying to add search icon inside search box here's my code so far :
<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>
i face this Error: input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
can anyone help me with this ? much appreciated ! thanks
React's input element the same as HTML's input element can't have children.
You have to make the icon appear in the input box using CSS, you can't place it as a child.
.form-field {
position: relative;
display: inline-block;
}
.icon {
position: absolute;
right: 0;
}<div class="form-field">
<input>
<span class="icon">🔍</span>
</div>Also, you didn't close the <input> tag. It's wrong because every tag in react has to be closed either by using the closing tag </input> or using a self-closing tag <input />
You code should probably look like this:
<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>