reactjs - how to add json through mapping material-ui grid component

Question

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

question from:https://stackoverflow.com/questions/65929940/how-to-add-json-through-mapping-material-ui-grid-component

Answer 1

Here is the working sandbox.

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

Read more about how map works here