controlled-component-with-hooks1.jsx

controlled-component-with-hooks1.jsx

function SearchAndResultView({ search, setSearch, result }) {
  return (
    <Modal>
      <SearchBox search={search} setSearch={setSearch} />
      <ResultContainer result={result} />
    </Modal>
  );
}

function AnyofyourComponent() {
  const [search, setSearch] = React.useState("");
  const [result, setResult] = React.useState([]);

  async function onSearch(e) {
    const value = e.target.value;
    setSearch(value);
    // do some API call

    const res = await fetch("https://random-api");
    setResult(res.data);
  }
  return (
    <SearchAndResultView
      search={search}
      setSearch={setSearch}
      result={result}
    />
  );
}