CODEWITHSUNDEEP
javascriptreactjs
Chris Jones
Chris Jones

Reputation: 67

ReactJs: Styling with props and lists

I am creating a website, and i am using the style in jsx, but, the styling is not working while outputting lists.

I have done it by outputting each one separately which works, but, I want to make it more reproducible by outputting a list/array.

There are no error messages about the stying, but I have an error message that it is not recognising a key for each item in the list.

I have created two parts for this products page the first one is were all the products will be where I'll call my second one, which contains the template, then it will render all of them out by reading an the list/array.

This is the Main one 'Products.js'

import React, { Component } from 'react';
import './Products.css';
import Product from './Product'

class Products extends Component {
state={
  product: [
    { name: "T-SHRIT1", colour: "#404040", price: "£50", imgSrc: "./imgs/products/test.png", imgalt: "t-shirt", accentcolour: "#D9D9D9", id: 1 },
    { name: "T-SHRIT2", colour: "#404040", price: "£50", imgSrc: "./imgs/products/test.png", imgalt: "t-shirt", accentcolour: "#D9D9D9", id: 3 },
    { name: "T-SHRIT3", colour: "#C4C4C4", price: "£50", imgSrc: "./imgs/products/test2.png", imgalt: "t-shirt", accentcolour: "#626262", id: 2 },
    { name: "T-SHRIT4", colour: "#C4C4C4", price: "£50", imgSrc: "./imgs/products/test2.png", imgalt: "t-shirt", accentcolour: "#626262", id: 4 },
  ]
}

  render() {
    return (
      <div className="Products">

        <div className="Products_container">

          <Product product={this.state.product} />

            </div>

          </div>
    );
  }
}

export default Products;

This is the template code 'Product.js'

import React from 'react';
import './Products.css';
import anime from 'animejs';


const Product = ({product}) => {

  
  const Productslist = product.map(item => {
    return(
      <div className="Product" style={{background: item.colour,}} key={item.id}>
    <div className="ProductName" style={{color: item.accentcolour}}>{item.name}</div>
    <img src={item.imgSrc} alt={item.imgAlt} className="ProductImg"/>
    <div className="ProductPrice" style={{color: item.accentcolour}}>{item.price}</div>
  </div>
    )
  })

  return (
    <div className="Product">
      { Productslist }
    </div>
  );
}

export default Product;

Upvotes: 1

Views: 37

Answers (1)

Abhisar Tripathi
Abhisar Tripathi

Reputation: 1659

A small typo is there, replace product.colour with item.color;

Upvotes: 2

Related Questions