Отображение api call в другом компоненте, как совершить?

class Parent extends Component {
  state = {
    search: '',
    data: [],
  };

  componentDidMount() {
    fetchData().then(({ data }) => this.setState({ data }));
  }

  handleFilterChange = e => {
    this.setState({ search: e.target.value });
  };

  render() {
    const { data, search } = this.state;
    const filteredData = data.filter(el => /* some stuff */);
    
    return (
      <Wrapper>
        <SearchFilter onChange={this.handleFilterChange} />
        <DataList data={filteredData} />
     </Wrapper>
    )
  }
}