CODEWITHSUNDEEP
reactjsmaterial-ui
juexu
juexu

Reputation: 131

how to add json through mapping material-ui grid component

enter image description here

I want to add json data to 4ColorCards like the pic,but title``color``rating fail the render,please see the code below:

import ColorCard from "./ColorCard"
import React from "react"
import data from "./initialState.json"

export default function ColorCards(){
const dataColors=data.colors
  return(
    dataColors.map(
      (n,color)=>(
        <ColorCard 
        key={color.id}
        title={color.title}
        color={color.color}
        rating={color.rating}
      

        />
      )
    )

  )
}

The full project link:https://codesandbox.io/s/material-demo-forked-62eh0?file=/index.js

Upvotes: 0

Views: 701

Answers (1)

Loi Nguyen Huynh
Loi Nguyen Huynh

Reputation: 9928

Here is the working sandbox.

All I do is converting from (n,color)=>( to (color)=>(

Read more about how map works here

Upvotes: 1

Related Questions