score:1
Accepted answer
you are rendering childdata based on this.state.childdata
which will be referenced by both the parents.
i suggest you change the structure to something like
this.state = {
parentdata: [{
"title": "parenttitle",
"id": 1,
"childdata": [{
"title": "child1",
"id": 1
}]
}],
loading: true,
id: '',
};
i have created a fiddle with the solution you require. https://jsfiddle.net/8w0o5a2m/1/ i have removed the async functions from code for simplicity
Source: stackoverflow.com
Related Query
- Load parent and children dynamically in react
- React hooks: Dynamically mapped component children and state independent from parent
- how to load radio buttons dynamically and use check property in react js?
- Dynamically load javascript chunk with webpack and react router
- React and Redux: Are there any performance issues/possible side effects with passing a parent component as a prop to its children
- React exercise: two arrays rendered by two children and displayed next to each other (Matching indexes) in parent
- React changing state in Parent , does render calls for all its children and sub-children as iteration?
- React state passing through children and passing back to parent
- Dynamically import React component from external URL and use parent React environment
- Is it possible to load dynamic data on load, and children on click without setting children inside parent state?
- Dynamically load and render react component with input[type=file]
- React how to send object to sub-component when object is held in state of parent component and dynamically updated
- React Load Images and Dynamically Display in Component
- TypeScript and React - children type?
- React - how to capture only parent's onClick event and not children
- Accessing React component children props from the parent
- Using for loops and switch cases in React to dynamically render different components
- Why do you need to import React multiple times in parent and child components?
- Dynamically load a stylesheet with React
- What is the correct order of execution of useEffect in React parent and child components?
- Only allow specific components as children in React and Typescript
- Dynamically load redux reducers with react router 4
- Why does React re-render children when the parent changes?
- Extract CSS from SCSS and deferred lazy load in React app
- React - use ref in component AND pass it to parent in props
- Dynamically load a React component/bundle from external source
- Async Image Load with React and Redux
- Change the children of a component dynamically in React
- How to load background images from css in React and NextJS
- Validate dynamically generated form in react using redux-form and revalidate?
More Query from same tag
- How to secure component/path behind authentication in react?
- stop use eventsource being resubscribed to in react app
- React js Socket io not working in Local area network wifi
- Understanding ReactElement proptype
- Unable to get property 'remove' of undefined or null reference
- How can I prevent href from firing using React onClick?
- React JSX: How to avoid multiple onClick handlers for multiple elements
- Receiving "push is not a function" on JS reducer result array
- How to pass a function as a prop, when the component is expecting an object?
- How to clear selected value from dynamic select dropdown in react?
- React radial Gradient fill within chart
- How to add an interceptor to each request to keep ie from caching requests
- Include two javascript code in one html tag : jsx syntax problem
- React BrowserRouter not rendering when nabber link is clicked
- Storybook 6, use module paths?
- Adding Data into an Array as a state object in reactjs
- How to change interval value in React
- Third party script file in reactjs
- useState updates correctly when adding to array, but not removing
- Twilio Web Chat Channel Listener
- Search this api by city React/javaScript
- Not getting data in fetch even if the status is 200 in react
- Conditional Rendering in ReactJS
- How to fix state update?
- plz help for aws ec2 react+node build error
- npm error " The header content contains invalid characters" when installing React-Native?
- React enable drag events on not draggable element
- How to implement disjoint unions in Flow in logical component
- React / single page / struct header/content/footer
- Action Cable error Could not execute command from...RuntimeError - Unable to find subscription with identifier