La tarea es crear un componente Fiter.jsx que filtrará Products.jsx (puedes verlo en el repositorio)
Tengo React Componentes:
Principal.jsx
import React from "react"; import { Products } from "../Products"; import { Filter } from "../Filter"; import { Product } from "../Product"; class Main extends React.Component { state = { products: [], filteredProducts: [], status: "all", }; onFilterStatusChange = (status) => { this.setState({ status }); }; componentDidMount() { fetch("./products.json") .then((responce) => responce.json()) .then((data) => this.setState({ products: Object.values(data) })); } filterProducts() { this.setState(({ status }) => ({ filteredProducts: status === "all" ? this.state.products : this.state.products.filter((n) => n.prod_status.includes(status)), })); } componentDidUpdate(prevProps, prevState) { if (this.state.status !== prevState.status) { this.filterProducts(); } } render() { // const { products } = this.state; return ( <main className="container content"> <Filter title="Status:" values={["all", "recommended", "saleout", "bestseller", "new"]} value={this.state.status} onChange={this.onFilterStatusChange} /> <Products products={this.state.filteredProducts} /> </main> ); } } export { Main };
Filtro.jsx
const Filter = ({ title, values, value, onChange }) => ( <div> <h3>{title}</h3> {values.map((n) => ( <label> <input type="radio" onChange={() => onChange(n)} checked={value === n} /> {n} </label> ))} </div> ); export { Filter };
En esta etapa, la consola muestra un error y el sitio muestra lo siguiente:
Repo con todos los archivos
Antes de intentar crear un filtro, el sitio se veía así:
Oye, como otros han señalado que algunos products
no tienen un prod_status
, cambia n.prod_status.includes(status)
a n.prod_status?.includes(status)
en filterProducts
, que está en el componente Main
.
Una cosa más es que en el renderizado inicial muestra Nothing found pero el status
está establecido en all
. Debe mostrar todos los productos disponibles. Para corregir esto, cambie la condición this.state.status !== prevState.status
en component.didUpdate
to this.state.status !== prevState.status || this.state.products !== prevState.products
.
Dado que en el primer valor de status
de renderizado no cambiará, es decir. all
excepto los cambios de producto de [] a [artículo...]. Entonces verifique si los productos han cambiado o no y luego ejecute la función filterProducts
.
Por último, como el archivo products.json
está en el directorio público, en la llamada de fetch
debe escribir la ruta del archivo comenzando con /
.