'SearchIcon' is not defined no-undef

Question

I have tried to display a search icon inside my search bar, but it isn't working. my code is

import React, { useEffect } from "react";

//31915c5e

const API_URL = 'http://www.omdbapi.com?apikey = 31915c5e'

const App = () => {
 
    const searchMovies = async (title) => {
        const response = await fetch(`${API_URL}&s=${title}`);
        const data = await response.json();

        console.log(data.search); 
    }

    useEffect(() => {
        searchMovies('spiderman');
    }, []);



    return (
        <div className="app">
            <h1>MovieLand</h1>

            <div className="search">
                <input
                    placeholder="search for movies"
                />

            /*https://react-icons.github.io/react-icons/icons?name=gi*/
                <img
                    src={SearchIcon}
                    alt="search"
                    
                />

            </div>

        </div>
    );
}

export default App;

showing a search icon inside my search bar. on the browser it displays 'SearchIcon' is not defined no-undef

Answer 1

There are different ways of doing this, I would either install @fortawesome/react-fontawesome and @fortawesome/free-solid-svg-icons and do it with that, or, the option I would prefer that consists in using inline styles, positioning the icon as a background of the input tag; it would be something like this:

import React, { useState } from "react";
import searchIcon from "path/to/search-icon.svg";

function SearchInput() {
  const [searchTerm, setSearchTerm] = useState("");

  return (
    <div>
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{
          padding: "0.5rem 0.5rem 0.5rem 2rem",
          background: `url(${searchIcon}) no-repeat`,
          backgroundSize: "1.5rem",
          backgroundPosition: "0.5rem center",
        }}
      />
    </div>
  );
}

export default SearchInput;

This will create an input element with a search icon as its background, and the icon will be positioned inside the input at the center left of the input field. You can adjust the position of the icon using the background-position property and you can adjust the size of the icon using the background-size property.