Блог

Я новичок в React и пытаюсь отфильтровать список электронных .users-list писем. Я просто хочу вернуть то, что пользователь вводит SearchBox , но это не работает. Есть предложения?

Dashboard.js

 import React, { Component } from "react";
import Button from "../Button/Button";
import SearchBox from "../SearchBox/SearchBox";
import "./Dashboard.css";
import fire from "../../fire"

class Dashboard extends Component {
    constructor(){
        super();
        this.state = {
            users:[],
            searchField:''
        }
    }
    handleLogout = () => {
        fire.auth().signOut();
      };

  render() {
    const {users, searchField} = this.state
    const filteredUsers = users.filter(users => (users.users.toLowerCase.inc))
    return (
      <div>
        <h2>Welcome</h2>
        <button onClick={this.handleLogout}>Logout</button>
        <div className="users-container">
          <div>
            <SearchBox
              placeholder="Enter email..."
              handleChange={(e) =>
                this.setState({ searchField: e.target.value})
              }
            />
          </div>
          <ul className="users-list">
            <li>
              <span>jean@gmail.com</span>
            </li>
            <li>
              <span>albert@gmail.com</span>
            </li>
            <li>
              <span>kevin@gmail.com</span>
            </li>
            <li>
              <span>lucie@gmail.com</span>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Dashboard;
 

SearchBox.js

 import React from 'react';

const SearchBox = (props) => {
    return(
        <input 
        type='search'
        className='search'
        placeholder={props.placeholder}
        onChange={props.handleChange}
        />
    )
}

export default SearchBox
 

Вы можете следовать: ДЕМОНСТРАЦИЯ codesandbox

Используйте
MEMO для оптимизации производительности: будет повторно вычислять сохраненное значение только при изменении одной из зависимостей. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендеринге.

 import React, { useMemo, useState } from "react";
import "./styles.css";

const usersData = [
  {id:1,email: 'jean@gmail.com'},
  {id:2,email: 'albert@gmail.com'},
  {id:3,email: 'kevin@gmail.com'},
]

export default function App() {
  const [search, setSearch] = useState("");

  const filteredUsers = useMemo(() => {
    if (search) {
      return usersData.filter(
        (item) =>
          item.email
            .toLowerCase()
            .indexOf(search.toLocaleLowerCase()) > -1
      );
    }
    return usersData;
  }, [search]);
  
  return (
    <div className="App">
      <h1>users list</h1>
      <input type="search" name="search" value={search} onChange={e => setSearch(e.target.value)} />
      <ul>
      {filteredUsers.length > 0 ?
        (filteredUsers amp;amp; filteredUsers.map(item => (
          <li key={item.id}>{item.email}</li>
        ))): <div>empty</div>
      }
      </ul>
    </div>
  );
}