CODEWITHSUNDEEP
reactjsfilter
Daemes
Daemes

Reputation: 16857

Filter information in the database with React

I would like to filter information on different pages and I am having difficulty.

I have a first page with a customers list. I manage to display it with the map method. This is my code and it's working perfectly:

.map((customer) => {
      return (
        <TableRow hover role="checkbox" tabIndex={-1} key={customer.code}>
          <TableCell align="center">{customer.name}</TableCell>
          <TableCell align="center">{customer.description}</TableCell>
          <TableCell align="center">
            <Link style={{ textDecoration: 'none' }} to={`/customer/${customer.uuid}`}>
              <Button>View</Button>
            </Link>
          </TableCell>
        </TableRow>
      );

but I block here: I would like to have a second page with a workshops list with the customer in question (not a list of all the workshops of the database). Here is my database: customers (uuid, name, description) and workshops (uuid, name, address, city, country, wsp_user_uuid).

This is my code for the second page for the moment :

const ViewCustomer = () => {
    const [workshops, setWorkshops] = useState([]);

useEffect(() => {
    const getWorkshops = async () => {
      const result = await axios.get("http://zzzz/workshop");
      setWorkshops(result.data);
    };
    getWorkshops();
  }, []);

const tableHeader = columns.map((column) => (
    <TableCell
      key={column.id}
      align={column.align}
      style={{ minWidth: column.minWidth }}
    >
      {column.label}
    </TableCell>
  ));

const mainContent = workshops
    .map((workshop) => {
      return (
        <TableRow hover role="checkbox" tabIndex={-1} key={workshop.code}>
          <TableCell align="center">{workshop.name}</TableCell>
          <TableCell align="center">{workshop.adress}</TableCell>
          <TableCell align="center">{workshop.city}</TableCell>
          <TableCell align="center">{workshop.country}</TableCell>
        </TableRow>
      );
    });



    return (
            <Table stickyHeader aria-label="sticky table">
                <TableHead>
                  <TableRow>{tableHeader}</TableRow>
                </TableHead>
                <TableBody>{mainContent}</TableBody>
              </Table>
    );
};

export default ViewCustomer;

Do you have any advice or tips for me a filter to make this second page?

Upvotes: 1

Views: 155

Answers (1)

Oleg Imanilov
Oleg Imanilov

Reputation: 2751

As I understand, you want to show only workshop data where wsp_user_uuid equal to selected customer. If so - 1st you should pass customerId into ViewCustomer component. Example: const ViewCustomer = ({customerId}) => {...

2nd. Use filter before rendering workshop data

const mainContent = workshops
    .filter( w => w.wsp_user_uuid === customerId )
    .map((workshop) => {

And finally , usage of the component should look like <ViewCustomer customerId={selectedCustomer.uuid} />

Upvotes: 1

Related Questions