filter search bar not showing up

Question

I'm trying to create a filtering search bar to sort through a limited set of data pulled from an API. The code compiled successfully, however despite having an input set to generate the search bar, it is not visible. Here is my FilterSearch component, where I'm trying to implement the filter and pull the results through my StudentInfo component.

Here is the FilterSearch component:

const USERS = "https://api.hatchways.io/assessment/students";
export default function FilterSearch() {
  const [name, setName] = useState(" ");
  const [foundUsers, setFoundUsers] = useState([]);

  const filter = (keyword) => {
    setName(keyword); 
    if (!keyword || keyword !== " ") {
      setFoundUsers([]);     }
    axios.get(USERS).then((listStudents) => {
      console.log(listStudents);
      const results = listStudents.data.students.filter((data) => {
        return data.students.name
          .toLowerCase()
          .startsWith(keyword.toLowerCase());
      });
      setFoundUsers(results);
    });
  };

  return (
    <div className="container">
      <form>
        <input
          type="search"
          value={name}
          onChange={(e) => {
            console.log(e.target);
            filter(e.target.value);
          }}
          className="input"
          placeholder="Filter"
        />
        ;
      </form>

      <div className="user-list">
        {foundUsers && foundUsers.length > 0 ? (
          foundUsers.map((name) => <StudentInfo name={name} />)
        ) : (
          <h1>No results found!</h1>
        )}
      </div>
    </div>
  );
}

For more context, here is my StudentInfo component:

import "./StudentInfo.css";

export default function StudentInfo({ info }) {
  return (
    <div className="StudentInfo">
      <div className="row">
        <div className="col-md-3">
          <img
            src={info.pic}
            alt={info.firstName}
            width={200}
            className="img-fluid pics"
          />
          <hr />
        </div>
        <div className="col-md-9">
          <h1 className="name">
            {info.firstName} {info.lastName}
          </h1>
          <h2>Email: {info.email}</h2>
          <h2>Company: {info.company}</h2>
          <h2>Skill: {info.skill}</h2>
          <h2>Average: {info.grades[0]}</h2>
          <hr />
        </div>
      </div>
    </div>
  );
}

Answer 1

So once you have the user list from the API, you can pass it into the setter function to directly update the foundUsers state as follows:

const USERS = 'https://api.hatchways.io/assessment/students';
export default function FilterSearch() {
    const [name, setName] = useState(' ');
    const [foundUsers, setFoundUsers] = useState(USERS);
    const filter = (e) => {
        const keyword = e.target.value;
        axios.get(USERS).then((listStudents) => {
            setFoundUsers(listStudents); // this is where you will use and pass the listStudents
        });
    };
}

Also, assuming your foundUsers will be coming in an array, you should set initialize it to an empty array instead of the URL itself

const [foundUsers, setFoundUsers] = useState([]);

Edit:

You want the input to take the default value of your state. Also you need to update that state whenever a change happens

<input
    type="search"
    value={name}
    onChange={(e) => {
        filter(e.event.target);
    }}
    className="input"
    placeholder="Filter"
/>;

Now you can change the filter function as follows:

const filter = (keyword) => {
    setName(keyword);   // we update the value of name first so that you see it update on the UI
    // let's not wait until after the API call, if keyword is empty, no need to process anything
    if (!keyword || keyword !== ' ') {
        setFoundUsers([]); // since there are no users to be found we set it to an empty array
    }
    // now that we know we have a legitimate keyword, we continue processing via api call
    axios.get(USERS).then((listStudents) => {
        const results = listStudents.filter((user) => {
            return user.name.toLowerCase().startsWith(keyword.toLowerCase());
        });
        setFoundUsers(results);
    });
};