Фильтрация в react

Question

Подскажите пожалуйста как сделать поиск по нажатию на кнопку: Есть такая структура, выводиться список teams, внутри выводиться users. Как можно сделать фильтрацию внутри определенного teams по users?

teams: Array(2)
0: {id: 175, name: '1', active: true, self: false, level: null, …}
1: {id: 176, name: '2', active: true, self: false, level: null, …}



users: Array(3)
0: {userId: null, name: 'aaaa', email: '', groupId: 175, level: 4}
1: {userId: 73, name: 'Tester1112', email: '[email protected]', groupId: 176, level: 1}
2: {userId: 73, name: 'Tester1112', email: '[email protected]', groupId: 175, level: 1}

Answer 1

Можно создать компонент <TeamItem /> который будет отображать команды. Далее при отрисовке каждой команды создаём стейт для фильтрации. И создаём input для ввода фильтрующего текста. При отрисовке пользователей сначала фильтруем массив пользователей чтобы исключить пользователей которые не попадают в список по фильтру. Получается так:

// import React from "react";

const teams = [
  {
    name: "team1",
    users: [
      { userId: 73, name: "Gary Tester 73" },
      { userId: 74, name: "Thomas Tester 74" },
      { userId: 75, name: "Sven Tester 75" },
    ],
  },
  {
    name: "team2",
    users: [
      { userId: 63, name: "John 63" },
      { userId: 64, name: "Mary 64" },
      { userId: 65, name: "Moly 65" },
    ],
  },
  {
    name: "team3",
    users: [
      { userId: 53, name: "Abc 53" },
      { userId: 54, name: "Adef 54" },
      { userId: 55, name: "Def 55" },
    ],
  },
];

const App = () => {
  const [state, setState] = React.useState(teams);

  return (
    <div>
      {state.map((team) => (
        <TeamItem key={team.name} name={team.name} users={team.users} />
      ))}
    </div>
  );
};

const TeamItem = ({ name, users }) => {
  const [filter, setFilter] = React.useState("");
  return (
    <div
      key="name"
      style={{ border: "1px solid black", margin: "1rem", padding: "1rem" }}
    >
      <div>Team name : {name}</div>
      <label for="filter">Filter users:</label>
      <input
        value={filter}
        onChange={({ target: { value } }) => setFilter(value)}
        id="filter"
      />
      <div>
        Users :
        {users
          .filter((user) => user.name.toLowerCase().includes(filter.toLowerCase()))
          .map((user) => (
            <div key={user.userId}>User name: {user.name}</div>
          ))}
      </div>
    </div>
  );
};

// export default App;

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

БЛОГ НА HUSL

Фильтрация в react

Ответы (1 шт):