Hay una propiedad "productos" en su componente. Esa variable tiene mayor prioridad que el mapa que tienes afuera, y tu .map la está usando. Recomendaría cambiar el nombre de uno de ellos, para evitar variables con el mismo nombre.

Dado el error, supongo que esa propiedad no se pasó al componente.

Además, el parámetro del mapa lambda también es "productos". Cámbielo a "producto" o fallará.

Las propiedades, products , que está pasando a su componente ( Products ) no están definidas. El método Map tiene en cuenta que los products que ha pasado como propiedades no son los que ha creado fuera del componente en sí.

Si desea mapear la matriz de products que creó fuera de sus componentes, simplemente cambie su nombre ya que la matriz tiene el mismo nombre que las propiedades pasadas. Si desea utilizar los products (de la propiedad), asegúrese de pasar las propiedades en el componente.

Asegúrese de pasar las propiedades de los productos al componente Producto. Cambia esto:

 {products.map((products) => ( <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}> <Product/>

a esto:

 {products.map((products) => ( <Grid item key={products.id} item xs={12} sm={6} md={4} lg={3}> <Product/>

¿Por qué? Debido a que está mapeando un objeto ( productos ) en un elemento JSX en su caso, que es el componente <Product/>, por lo que al usar {product.id} está intentando mapear un objeto indefinido. Luego, asegúrese de que la propiedad de los productos que está tratando de mapear se pase correctamente al componente principal mediante el componente Productos .

Es porque ha tomado la matriz "productos" y el elemento del mapa "productos" con el mismo nombre. Cambie el elemento del mapa a algo más como "producto":

 const products = [ {id: 1, name: 'Shoes', description: 'Running Shoes.' }, {id: 2, name: 'MacBook', description: 'Apple MacBook.' }, ]; const Products = ({ products }) => { const classes = useStyles(); return ( <main className={classes.content}> <div className={classes.toolbar} /> <Grid container justify="center" spacing={4}> {products.map((product) => ( <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}> <Product/> </Grid> ))}; </Grid> </main> ); };

Marque INITIAL_STATE en el reductor.

Debe especificar una matriz en el objeto de ID que está llamando en el reductor.

Ejemplo:

 const INTIAL_STATE = { products: [], product: { name: "", brand_name: "", prices: "", color: "", images: []}, error: "", } product.images.map(img => { return( <div key = {img.id} className = "img-itemm"> <img src = {img.image} alt = {img.image} /> </div> ) })

 {products && products.map((product) => ( <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}> <Product /> </Grid> ))};

Tuve el mismo error y lo resolví preguntando primero si existía la matriz.

Ejemplo:

 <Filter> { product.color?.map((c) => ( <FilterColor color = {c} key = {c} /> ))}; </Filter>

al principio, verifique que los productos se exporten si es así, entonces

cambiar

 {products.map((products) => ( <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}> <Product/>

para

 {products.map((products) => ( <Grid item key={products.id} item xs={12} sm={6} md={4} lg={3}> <Product/>

porque aquí asigna productos como productos, por lo que debe establecer una clave como products.id

Tuviste que nombrar cada iteración del método de mapa con productos, pero estás usando producto para capturar cada instancia de la iteración.

A veces, da un error cuando no ha utilizado la variable de useState. y he hecho otros 2 componentes. 1) Gira 2) Giras

 const [tours, setTours ] = useState([]);

Ahora, he usado esta variable de tours en el archivo App.js usando componentes de Tours.

Aplicación.js

He usado recorridos en el archivo App.js.

Aplicación.js

Ahora, estoy tomando la variable tours para usar la función .map() en el archivo Tours.js.

 const Tours = ({ tours }) => { /... {tours.map() .../

Tours.js

Debe verificar que ambos archivos tengan la misma ortografía; de lo contrario, da un error y tampoco funciona la interfaz de usuario de ese archivo en particular.

Gracias por leer.

deberías probar esto:

 {products.map((product) => ( <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}> <Product/> </Grid> ))};