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",
},
]
Source: stackoverflow.com
Related Query
- ReactJS How to pass iterated values to child component from parent component using Context API
- How to pass values from child component to parent in ReactJS
- Reactjs - How to pass values from child component to grand-parent component?
- How to pass form values from child component to parent in react
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- How to pass state from parent Component to child component in route (react-route-dom) reactjs
- Need Reactjs help on how to properly pass this function from the parent to child button component
- How to pass data from child component to parent component in reactjs
- How to pass Array from Parent component to Child component in reactjs
- How to pass the changed state from child component to its parent in ReactJS
- How to pass updated array object to parent component from child component in reactJs
- ReactJS How to pass child component values to parent component
- ReactJS - How to pass data from child to parent component & parent to child component on the same event?
- How to pass data from child component to its parent in ReactJS?
- How to pass function as props from functional parent component to child
- How to pass value from parent component to child component (react)
- How do i pass data up from a child web component to it's direct parent element
- How to pass input value from child to parent component react
- How to pass value from a child functional component to parent class component?
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- How to pass an Array from Child component to Parent component in react I know how to pass from parent t
- How can I access child components values from a parent component when they are added dynamically?
- How to pass function from parent component to child component with type assingable
- React TS - How to pass props from a parent component to a deeply nested child
- How to force update child component from parent component in reactjs
- In React, how do a pass a parameter from a child component up to a parent component?
- How do I pass values from a parent element to a child element in ReactJs?
- How to pass data from a child component to a parent component in React.js
- How to pass a prop back from child to parent in onclick handler and then to another component in React?
- How to pass data from parent to child component in reactjs?
More Query from same tag
- Why "this" keyword should be used in react click events?
- group by dropdown list component in React JS
- Is Reactjs based on Object Orient concept?
- Conditional rendering with React when api doesn't return image url
- I didn't put function on args of component. What should I fix it? React
- Set TextField value after debounce not working
- Warning: Each child in a list should have a unique "key" prop. "Render Login"
- React web navigation switch to Burger Menu
- 500 Error and Unexpected token < in JSON at position 0 when deployed MERN on Heroku
- The question about React.memo and performance optimisation
- How can I set state in useMemo with an async function?
- How to prevent Carousel from rerendering
- Laravel-echo showing 401 (Unauthorized) for private channel except one user
- Extending a html component get attributes are not working
- How to write inside input after making it editable?
- React state taking previous initialized values when updating
- React Tooltip component with TypeScript getting a 'Possibly Undefined' error on my useRef element, not sure how to fix
- how to find the latest document in mongo db using moongoose
- React: Passing up data from child component into parent does not update values in parent
- Update props of specific component
- React tailwind, cannot pass tailwind css from parent to child
- calling react setState multiple times in mount
- How to add obj to to state in my example Redux React
- React useEffect dependent on value which is initialized after api has been called
- React Card Example issue - Card is replaced instead of being appended to a list of cards in another column
- Is it possible to "initialize" a React component?
- After I deploy my project he can’t find the images and log
- How to call methods in react-visjs-timeline
- ReactJS - Data does not load in dropdown list from axios call
- Not able to display tags from an array onto a label tag