Display a list of users from a REST API and filter with React-CodePudding

I'm new here and also new to react js and I'm having trouble solving 1 exercise that asks to display a list of users coming from a REST API and then to be able to filter it.

I have managed to show it but I don't know how to do the filter.

EDIT:

Well Thanx I manage to use filters as you say :D.

But now I want the user to be able to select which columns are shown and which are not.

For this I have created a select from which I plan to remove the filter but I don't really know how to proceed :/

This is how I'm doing the filter, using a text input.

//Query
  const [query, setQuery] = useState("");

  const search = (data) => {
    return data.filter(
      item => item.name.toLowerCase().includes(query));
  }

the select

<select className='select' onChange={changeFilter}>
        <option value="">All</option>
        <option value="name">Name</option>
        <option value="username">Username</option>
        <option value="email">Email</option>
        <option value="phone">Phone</option>
      </select>

So basically I pretend to change the "name" here: item.name.toLowerCase().includes(query)); for filter and if All is selected its shows all.

Any help with this?

Code from the fetch:

// users from API.
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetchData();
  }, []);






  // async function
  const fetchData = async () => {
    await fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data))
      .catch((error) => {
        console.log("ERROR:"   error);
      })
  }

 <div>
  {
    users.map((user) => (
      <UsersList
        key={user.id}
        name={user.name}
        username={user.username}
        email={user.email}
        phone={user.phone}
      />
    ))
  }
</div>

CodePudding user response：

You could use a state called filterInput for example and an input, and filter(). Like so:

const [users, setUsers] = useState([]);
const [filterInput, setFilterInput] = useState("");

<div>
  <input type="text" value={filterInput} onChange={() => setFilterInput(e.target.value)} />
  {users
    .filter((user) => user.name.includes(filterInput) || user.username.includes(filterInput))
    .map((user) => (
      <UsersList
        key={user.id}
        name={user.name}
        username={user.username}
        email={user.email}
        phone={user.phone}
      />
    ))}
</div>

CodePudding user response：

You can use the filter method like this:

const isUserEligible = (user) => {
  if(/* the condition that the user must have */) {
    return true;
  } else {
    return false;
  }
}

users.filter((user) => isUserEligible(user)).map((user) => (
  <UsersList
    key={user.id}
    name={user.name}
    username={user.username}
    email={user.email}
    phone={user.phone}
  />
))

CodePudding user response：

.filter MDN

users.filter(user => user.name.startsWith('R')).map((user) => (
    <UsersList
      key={user.id}
      name={user.name}
      username={user.username}
      email={user.email}
      phone={user.phone}
    />
  ));