score:1
Accepted answer
your parent component holds the data and the child uses it. it seems to me you're doing it the right way. here is a fully working example: codesandbox
class parent extends component {
constructor(props) {
super(props);
this.state = {
data: []
};
this.updatedata = this.updatedata.bind(this);
}
async fetchdata() {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
return response.json();
}
updatedata() {
this.setstate({ data: [] }) // creates a flicker, just so you see it does refresh the child
this.fetchdata().then((res) => this.setstate({ data: res }));
}
render() {
return <child data={this.state.data} onaction={this.updatedata} />;
}
}
note i renamed your child prop fetchdata
into onaction
(i don't know what's the name of the action that triggers a refresh, could be onrefresh
). it's always best to see components props with separation between data attributes and event attributes.
even standard components have it this way: <input value={user.firstname} onchange={dosomething} />
. so, better to prefix events by on
, then the parent decides what to do with it. it's not the child's concern.
class child extends component {
render() {
const { data, onaction } = this.props;
return (
<>
<button onclick={onaction}>change data then fetch</button>
{data.map((item) => (
<div key={item.id}>
{item.id} - {item.title}
</div>
))}
</>
);
}
}
Source: stackoverflow.com
Related Query
- Re-render child after parent state change with get request
- React Child Component Not Updating After Parent State Change
- React Child with useEffect() not updating on Parent State Change
- Prevent child's state from reset after parent component state changes also get the values of all child components:ReactJS+ Typescript
- Change the state of parent component on click of a child component with a specific key in React JS
- Rerender component child after after state change in parent component
- How to test the child component render text after the button on the parent component click with react testing library?
- Can't change State from child component even after passing a function from parent component
- child Component doesn't re render after parent passes changed state
- How to get state data right after changing them from parent to child in React?
- React control parent state with input child on change method
- React: Update child with parent state change
- Parent State -> Child Component -> Render Component with onClick not working
- I just try to check what happens componentdidmount change state and value after render calls but get unexpected result
- React js change child component's state from parent component
- Updating Parent Component State from Child Component with UseState React Hook
- State change after a certain amount of time with React.js
- Can we pass setState as props from one component to other and change parent state from child component in React?
- How to pass state with parent to child component
- Prevent Component/PureComponent with styled-components from re-rendering all items after state change
- React, updating state in child component using props after async call in parent component
- How to Change Parent State from Child - Mobx State Tree?
- React child component not re-rendering on parent state change
- React - How do i force child components to re render when parent state component changes?
- Get state for child components connected to redux with enzyme
- Get clicked ID from parent to child element with ReactJs
- Wait for change of prop from parent component after changing it from a child in React
- how to get state right after state change in react hooks
- react stateless child components do not update on state change in parent component
- react.js change state of the topmost parent element from a deeply nested child
More Query from same tag
- Getting ID of current user into the URL of a method in NodeJS
- React component "unexpected token function"
- How do I share data between repeated elements in React?
- React, getting could not proxy request error
- MUI Autocomplete change selected option when another field changes
- react router - properly using links inside nested routes
- Why is useEffect not working here? Do I need to change the condition?
- How do I upload some special file extensions (djvu, jp2, ...) on web
- React TypeScript Passing a function to child component
- Error in infer of rootState type | TS2339
- Is it possible to not rebuild the whole app but generate new static files only in Nextjs?
- What's the best way to detect in which div am i to change the style of a navbar in React?
- ReactJS - Passing selected variable from list to render
- Use React build in onScroll on window
- React Web App Not Working or Deploying Correctly Now
- How do I get my HTML form date input to only allow specific days of the week to be chosen using JavaScript, React and HTML?
- How to use forEach in react js
- React "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node" with Chrome Extension
- Dynamically rendered images in Gatsby
- How to pass cli arguments to react craco?
- Print the JSON data in a text field in React JS
- It doesn't work Consumer/Provider in the example - the tab hangs
- "Unexpected labeled statement" warnings with Create React App
- Get Selected option attribute in React
- TypeError: Cannot read properties of undefined (reading 'prototype') React Typescript + Express
- How to setState of nested JSON array object of mapped input
- React dependency injection or similar?
- Material-ui drawer width issue
- Why does moving the array map of props outside the render function not work in React?
- React Hooks useState with callback