Recibo los siguientes errores: 1. Advertencia: React.jsx: el tipo no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuve: matriz. Verifique su código en ButtonMenu.js:432. 2.Error: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto.
Parece tener un problema con esta línea de código:
<ProductList products={this.state.products} />¿No es esa la forma correcta de usar esto? Aquí está el código completo:
import React, {Component} from "react"; const ProductList =[ { id:0, category:"accessories", image:"./prod_images/accessory1.jpg", product: "product1", description: "product1", price: 0.00 },];
//Hay más de 50 de estos objetos. Los corté para mantener esto corto.
const CATEGORIES = ['All', 'Men', 'Women', 'Jerseys', 'Shirts', 'Accessories', 'Collectables']; class ButtonMenu extends Component { constructor(props) { super(props); this.state = { products: ProductList || [] }; } getCategory = category => { const filter = ProductList.filter(d => d.category === category); if (filter) { this.setState({products: filter}); } }; render() { return ( <> <div className="button Menu-container"> <ProductList products={this.state.products} /> {CATEGORIES.map(item => ( <button key ={item.toString()} className="main-btn" onClick={() => this.getCategory(item.toLowerCase())} value={item.toLowerCase()}> {item} </button> ))} </div> </> ); } } export default ButtonMenu;Está tratando de representar una matriz de objetos como si fuera un componente de reacción. Es por eso que está recibiendo el error porque es algo contra las reglas. Entonces, en lugar de ProductList , probablemente desee hacer algo como esto:
<div> {this.state.products.map((product) => { //here you render whatever you want to render about each product })} </div>Documentos: https://reactjs.org/docs/components-and-props.html#rendering-a-component
Su ProductList no es un componente de React, por lo tanto, no puede llamarlo como tal. Preferiría crear un componente que acepte la matriz de productos y los represente en consecuencia.
ProductList no es un componente, sino una matriz. Si es una matriz, entonces debe mapearla.
Está utilizando ProductList como un componente de React que no está permitido
<ProductList products={ this.state.products } />. // NOT ALLOWEDdónde
const ProductList = [ { id: 0, category: "accessories", image: "./prod_images/accessory1.jpg", product: "product1", description: "product1", price: 0.00 }, ];