Filtering in React.js

You are looking for something like this: https://codesandbox.io/s/distracted-frog-d5ocw

Basically pass the drivers to the list from the app component and filter it out based on the search term provided by the searchbox component

Your App.js:

import React from "react";
import "./styles.css";
import CardList from "./card-list";
import SearchBox from "./searchbox";
import allDrivers from "./drivers";

export default function App() {
  const [drivers, setDrivers] = React.useState(allDrivers);

  return (
    <div className="App">
      <h1>F1 Drivers</h1>
      <SearchBox
        onSearch={v => {
          console.log(v);
          if (!v) {
            setDrivers(allDrivers);
            return;
          }
          setDrivers(drivers.filter(d => d.name.toLowerCase().startsWith(v)));
        }}
      />
      <CardList drivers={drivers} />
    </div>
  );
}

your cardlist would look like

import React from "react";

import Card from "./Card";

function CardList(props) {
  return (
    <div className="card-list">
      {props.drivers.map(createCard => (
        <Card
          key={createCard.id}
          name={createCard.name}
          imgURL={createCard.imgURL}
          number={createCard.number}
          team={createCard.team}
          age={createCard.yearsOld.age}
          country={createCard.country}
        />
      ))}
    </div>
  );
}

export default CardList;

and searchbox is simply

import React from "react";
import "./drivers";

function SearchBox(props) {
  return (
    <input
      onChange={e => {
        props.onSearch(e.target.value);
      }}
      type="text"
      // value={props.value}
    />
  );
}

export default SearchBox;