I am trying to insert font-awesome icons inside react, where I want to set the placeholder of input as search icon
const Search = () => {
return (
<>
<div className="Search">
<form className="Search__form">
<img src="" />
<input
type="text"
placeholder=" Search"
style="font-family:Arial, FontAwesome"
></input>
<button>Search</button>
</form>
</div>
</>
);
};
I got this error
Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
It is because JSX is not HTML, in JSX you have to pass style as an Object, and to use javascript we have to put a {} and then inside first {} put your styles in an object, but style keys should be in camelCase
Eg:
const Search = () => {
return (
<>
<div className="Search">
<form className="Search__form">
<img src="" />
<input
type="text"
placeholder=" Search"
style={{fontFamily:"Arial, FontAwesome"}}
></input>
<button>Search</button>
</form>
</div>
</>
);
};