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 ;
//return ;
})}
>
);
};
const Cricketer = (props) => {
const { name, category } = props.cricket;
//const { name, category } = props;
return (
- {name}
- {category}
);
};
export default Cricketers;
SECOND WAY
import React from "react";
import { cricketData } from "./CricketData";
const Cricketers = () => {
return (
<>
{cricketData.map((data) => {
// return ;
return ;
})}
>
);
};
const Cricketer = (props) => {
//const { name, category } = props.cricket;
const { name, category } = props;
return (
- {name}
- {category}
);
};
export default Cricketers;
![](https://clientsidecoding.com/wp-content/uploads/2023/01/T9-1.jpg)