score:1

actually you don't need to use context for above purpose, just change your components to this:

parent

import react, { usestate } from "react";
import { childcomponent } from "./child-component";

export function parentcomponent(props) {
  const [parentstate] = usestate([
    {
      name: "jonny",
      age: "20",
    },
    {
      name: "raj",
      age: "24",
    },
    {
      name: "rahul",
      age: "21",
    },
    {
      name: "jenny",
      age: "26",
    },
  ]);

  return (
    <>
      {parentstate.map((obj, index) => (
        <childcomponent
          key={index}
          name={obj.name}
          index={index}
          age={obj.age}
        />
      ))}
    </>
  );
}

children:

import react from "react";

export function childcomponent({ name, age }) {
  return (
    <div classname="container">
      <span>name: {name}</span>
      <span>age: {age}</span>
    </div>
  );
}

and if the parentstate is not going to change it's better just to use a normal variable for that like this:

const parentstate = [
    {
      name: "jonny",
      age: "20",
    },
    {
      name: "raj",
      age: "24",
    },
    {
      name: "rahul",
      age: "21",
    },
    {
      name: "jenny",
      age: "26",
    },
  ]

Related Query

More Query from same tag