Loop through the items

using map to loop

Import the cricketData
Both the ways produces the same result.
Second approach uses the spread operator

DATA

				
					export const cricketData = [
  {
    id: 1,
    name: "SKY",
    category: "AllRounder",
  },
  {
    id: 2,
    name: "Ishan Kishan",
    category: "Batsman",
  },
  {
    id: 3,
    name: "Siraj",
    category: "Bowler",
  },
];

FIRST WAY

				
					import React from "react";
import { cricketData } from "./CricketData";

const Cricketers = () => {
  return (
    <>
      {cricketData.map((data) => {
        return <Cricketer cricket={data} key={data.id} />;
        //return <Cricketer {...data} key={data.id} />;
      })}
    </>
  );
};

const Cricketer = (props) => {
  const { name, category } = props.cricket;
  //const { name, category } = props;
  return (
    <div>
      <ul>
        <li>{name}</li>
        <li>{category}</li>
        <hr></hr>
      </ul>
    </div>
  );
};
export default Cricketers;

SECOND WAY

				
					import React from "react";
import { cricketData } from "./CricketData";

const Cricketers = () => {
  return (
    <>
      {cricketData.map((data) => {
        // return <Cricketer cricket={data} key={data.id} />;
        return <Cricketer {...data} key={data.id} />;
      })}
    </>
  );
};

const Cricketer = (props) => {
  //const { name, category } = props.cricket;
  const { name, category } = props;
  return (
    <div>
      <ul>
        <li>{name}</li>
        <li>{category}</li>
        <hr></hr>
      </ul>
    </div>
  );
};
export default Cricketers;

Leave a Comment Cancel reply