Display api call in another component, how to commit?

Question

JavaScript

Hello everyone, I have two components.
The first component is responsible for displaying the data received from the json file.
There is a second component in which the Input is located, through which I do a json search exactly according to the data that the user enters. And now the question is, since the code for rendering is in one file, and the search is in another, how can I link them? or is it impossible?
don't want to output all this in one file or can't this be avoided?

Answer 1

The simplest option is to pass the handler and data through the parent:

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