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

Question

[Brake Made]

Всем привет, у меня есть два компонента.
Первый компонент отвечает за отображение данных получаемых с json файла.
Есть второй компонент в котором находится Input , через который я делаю поиск по json именно по данным которые вводит пользователь. А теперь вопрос, так как код на рендер находится в одном файле, а поиск в другом , как мне их связать? или это невозможно?

не охото все это выводить в один файл или этого не избежать?

Answer 1

[Антон Спирин]

Самый простой вариант это передавать хандлер и данные через родителя:

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