CODEWITHSUNDEEP
reactjsreact-context
darshak gosar
darshak gosar

Reputation: 21

ReactJS How to pass iterated values to child component from parent component using Context API

How can I pass values to the looped child component through parent component using Context API instead of passing props.

Parent Component

import React, { useState } from 'react'
import { ChildComponent } from './child-component'
import parentContext from './ParentContext'

export function ParentComponent(props) {
const [ parentState ] = useState([
  {
    "name": "Jonny",
    "age": "20"
  },
  {
    "name": "Raj",
    "age": "24"
  },
  {
    "name": "Rahul",
    "age": "21"
  },
  {
    "name": "Jenny",
    "age": "26"
  }
])
return (
<parentContext.Provider value={{parentState: parentState}}>
{parentState.map((obj, index) => 
<ChildComponent
        name={obj.name}  
        index={index}
        age={obj.age}
    />
)}
</parentContext.Provider>
)
}

Child Component

import React, { useState, useContext } from 'react'
import parentContext from './ParentContext'

export function ChildComponent(props) {
const parentData = useContext(parentContext)
const [ childState, setChildState ] = useState(parentData)
return (
<div className='container'>
<span>Name: {childState.name}</span>
<span>Age: {childState.age}</span>
</div>
)
}

I wanted to pass the values from the Parent Component and send it to Child Component followed by displaying the values within child component. Can someone help me with this.

Upvotes: 1

Views: 124

Answers (1)

Taghi Khavari
Taghi Khavari

Reputation: 6582

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",
    },
  ]

Upvotes: 1

Related Questions