CODEWITHSUNDEEP
javascriptreactjsfont-awesome
Joey
Joey

Reputation: 121

FontAwesome inside React JSX

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="&#xF002; 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.

Upvotes: 1

Views: 273

Answers (1)

sairaj
sairaj

Reputation: 413

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:

  • background-color: green => backgroundColor: 'green'
const Search = () => {
  return (
    <>
      <div className="Search">
        <form className="Search__form">
          <img src="" />
          <input
            type="text"
            placeholder="&#xF002; Search"
            style={{fontFamily:"Arial, FontAwesome"}}
          ></input>

          <button>Search</button>
        </form>
      </div>
    </>
  );
};

Upvotes: 1

Related Questions