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>
        ))}
      </>
    );
  }
}

Related Query

More Query from same tag