Блог

Любой должен иметь возможность фильтровать продукты на основе выпадающего списка категории продукта, который доступен на странице topordered. Этот идентификатор категории должен совпадать с идентификатором категории продукта, чтобы при выборе параметра ноутбук / мобильный отображались только ноутбуки или мобильные устройства. Добавили код ниже.

 class TopOrdered extends Component {
    state = {
        products: [],
       categorys:[]
      };
    getCategory() {
        axios
        .get(`https://aveosoft-react-assignment.herokuapp.com/categories`)
        .then(response =>
            response.data.map(category =>({
                name:`${category.name}`,
                id:`${category.id}`
            }))
        )
        .then(categorys => {
            this.setState({
              categorys: categorys,
          
            });
          })
    }
      getUsers() {
        axios
          .get(`https://aveosoft-react-assignment.herokuapp.com/products`)
          .then(response =>
            response.data.map(product => ({
              name: `${product.name}`,
              categoryId:`${product.categoryId}`,
            }))
          )
          .then(products => {
            this.setState({
              products:products,
          
            });
          })
      }
    
      componentDidMount() {
        this.getUsers();
        this.getCategory();
      }
    
      render() {
        const { products, categorys } = this.state;

        return (
            <div>
            {categorys.map(category => {
                const {name} = category;
                return(
                    <p>{name}</p>
                )
            })}
            </div>
            <div>
           { products.map(product => {
                  const { name,id } = product;
                  return (
                        <div>
                        <p>{name}</p>
                      </div>
                  );
                })}
            </div>
        );
      }
    
}
export default TopOrdered;