Question 73358 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to filter over a react dropdown and have the page update to show the table of only the item clicked in dropdown? – Reactjs

Pretty straight forward. I have a table (a list) shown on my webpage in react and want the user to filter the table to show what is clicked on the dropdown menu.

I’ve tried a lot of things, spent hours watching videos online. here is my code. I’m creating a state for the filter, mapping the correct item "saleperson" array and i have .includes(filterTerm) in there too. I can’t see what i’m doing wrong. I’m getting vague errors in my console so thats not very helpful. I’m new to react so i’m sure i’m doing some sort of syntax errors but need some help please. Thank you

import React, {useState, useEffect } from 'react';

function ListSalesHistory() {

  const [sales, setSales] = useState([])
  const [salespersons, setSalesPersons] = useState([])

  const [filterTerm, setFilterTerm] = useState("")

  const handleFilterChange = (e) => {
    setFilterTerm(e.target.value);
  }

  const fetchData = async () => {
    const url = 'http://localhost:8090/api/sales/salesperson/';
    const response = await fetch(url);

    if (response.ok) {
      const data = await response.json();
      setSalesPersons(data.salespersons);
    }
  }

  const getData = async () => {
    const response = await fetch('http://localhost:8090/api/sales/');

    if (response.ok) {
      const data = await response.json();
      setSales(data.salesrecord)
    }

  }

  useEffect(()=>{
    getData()
  }, [])

  useEffect(()=>{
    fetchData()
  }, [])

  const handleSalesPersonChange = (event) => {
    const value = event.target.value;
    setSalesPersons(value);
}

  return (
    <div>
      <h1>Sales person history</h1>
      <select value={salespersons} onChange={handleSalesPersonChange} required id ="salesperson" name="salesperson" className="form-select form-select-lg form-select-padding-lg mb-3" >
        <option value="" onChange={handleFilterChange}>Choose a sales person</option>
        {salespersons
        .filter((saleperson) => saleperson.name.includes(filterTerm))
        .map(saleperson => {
          return(
            <option key={ saleperson.name } value={ saleperson.name }>
              { saleperson.name }
            </option>
          )
        })}
      </select>
      <table className="table table-striped">
      <thead>
        <tr>
          <th>Sales person</th>
          <th>Customer</th>
          <th>VIN</th>
          <th>Sale price ($)</th>
        </tr>
      </thead>
      <tbody>
        {sales.map(sale => {
          return(
            <tr key={ sale.id }>
              <td>{ sale.sales_person.name }</td>
              <td>{ sale.customer.name }</td>
              <td>{ sale.automobile.vin }</td>
              <td>{ sale.sales_price }</td>
            </tr>
          );
        })}
      </tbody>
    </table>
    </div>

  )
}

export default ListSalesHistory;
Tags:

2

Answers


  1. 0

    Edit try this updated Code This time it should work:

    import React, { useState, useEffect } from 'react';

function ListSalesHistory() {
  const [sales, setSales] = useState([]);
  const [salespersons, setSalesPersons] = useState([]);
  const [selectedSalesPerson, setSelectedSalesPerson] = useState('');
  const [filterTerm, setFilterTerm] = useState('');

  const handleFilterChange = (e) => {
    setFilterTerm(e.target.value);
  };

  const fetchData = async () => {
    const url = 'http://localhost:8090/api/sales/salesperson/';
    const response = await fetch(url);

    if (response.ok) {
      const data = await response.json();
      setSalesPersons(data.salespersons);
    }
  };

  const getData = async () => {
    const response = await fetch('http://localhost:8090/api/sales/');

    if (response.ok) {
      const data = await response.json();
      setSales(data.salesrecord);
    }
  };

  useEffect(() => {
    getData();
    fetchData();
  }, []);

  const handleSalesPersonChange = (event) => {
    const value = event.target.value;
    setSelectedSalesPerson(value);
  };

  const filteredSales = sales.filter(
    (sale) =>
      sale.sales_person.name === selectedSalesPerson &&
      sale.sales_person.name.toLowerCase().includes(filterTerm.toLowerCase())
  );

  return (
    <div>
      <h1>Sales person history</h1>
      <select
        value={selectedSalesPerson}
        onChange={handleSalesPersonChange}
        required
        id="salesperson"
        name="salesperson"
        className="form-select form-select-lg form-select-padding-lg mb-3"
      >
        <option value="">Choose a sales person</option>
        {salespersons.map((saleperson) => (
          <option key={saleperson.name} value={saleperson.name}>
            {saleperson.name}
          </option>
        ))}
      </select>
      <input type="text" placeholder="Search..." onChange={handleFilterChange} />
      <table className="table table-striped">
        <thead>
          <tr>
            <th>Sales person</th>
            <th>Customer</th>
            <th>VIN</th>
            <th>Sale price ($)</th>
          </tr>
        </thead>
        <tbody>
          {filteredSales.map((sale) => (
            <tr key={sale.id}>
              <td>{sale.sales_person.name}</td>
              <td>{sale.customer.name}</td>
              <td>{sale.automobile.vin}</td>
              <td>{sale.sales_price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default ListSalesHistory;
    Login or Signup to reply.
  2. 0 
    import React, { useState, useEffect } from 'react';

function ListSalesHistory() {
  const [sales, setSales] = useState([]);
  const [filteredSalespersons, setFilteredSalesPersons] = useState([]);
  const [selectedSalesPerson, setSelectedSalesPerson] = useState('');
  const [filterTerm, setFilterTerm] = useState('');

  const handleFilterChange = (e) => {
    setFilterTerm(e.target.value);
  };

  const fetchData = async () => {
    const url = 'http://localhost:8090/api/sales/salesperson/';
    const response = await fetch(url);

    if (response.ok) {
      const data = await response.json();
      setFilteredSalesPersons(data.salespersons);
    }
  };

  const getData = async () => {
    const response = await fetch('http://localhost:8090/api/sales/');

    if (response.ok) {
      const data = await response.json();
      setSales(data.salesrecord);
    }
  };

  useEffect(() => {
    fetchData();
    getData();
  }, []);

  const handleSalesPersonChange = (event) => {
    const value = event.target.value;
    setSelectedSalesPerson(value);
  };

  const filteredSales = sales.filter(
    (sale) =>
      sale.sales_person === selectedSalesPerson &&
      sale.sales_person.name.toLowerCase().includes(filterTerm.toLowerCase())
  );

  return (
    <div>
      <h1>Sales person history</h1>
      <select
        value={selectedSalesPerson}
        onChange={handleSalesPersonChange}
        required
        id="salesperson"
        name="salesperson"
        className="form-select form-select-lg form-select-padding-lg mb-3"
      >
        <option value="">Choose a sales person</option>
        {filteredSalespersons
          .filter((saleperson) =>
            saleperson.name.toLowerCase().includes(filterTerm.toLowerCase())
          )
          .map((saleperson) => (
            <option key={saleperson.name} value={saleperson.name}>
              {saleperson.name}
            </option>
          ))}
      </select>
      <input type="text" placeholder="Search..." onChange={handleFilterChange} />
      {sales.length > 0 && (
        <table className="table table-striped">
          <thead>
            <tr>
              <th>Sales person</th>
              <th>Customer</th>
              <th>VIN</th>
              <th>Sale price ($)</th>
            </tr>
          </thead>
          <tbody>
            {filteredSales.map((sale) => (
              <tr key={sale.id}>
                <td>{sale.sales_person.name}</td>
                <td>{sale.customer.name}</td>
                <td>{sale.automobile.vin}</td>
                <td>{sale.sales_price}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default ListSalesHistory;

    Some minor changes i hope it works

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search