Listing 8-6: The SearchBox component

function SearchInput(props){

const handleChange = (e)=>{
  props.setSearchTerm(e.target.value);
}

return(
  <label>Enter your search term:
    <input type="text" value={props.searchTerm} onChange={handleChange} />
  </label>
);
}

export default SearchInput;

You're searching for:

function SearchResults(props){
  return(
    <p>You're searching for: {props.searchTerm}</p>
  );
}

export default SearchResults;

import {useState} from 'react';
import SearchInput from './SearchInput';
import SearchResults from './SearchResults';

function SearchBox(){
  const [searchTerm,setSearchTerm] = useState();

  return(
    <>
      <SearchInput searchTerm = {searchTerm} setSearchTerm = {setSearchTerm} />
      <SearchResults searchTerm = {searchTerm} />
    </>
  );
}
export default SearchBox;