Компоненты и пропсы

const Animal = (props) => {
  const [state, setState] = React.useState(false);
 
  const onInfoToggle = React.useCallback(() => {
    setState(!state);
  }, [state]);
 
  return (
    <div className="animal-container">
      <h4 className="animal-container__name">{props.animal.name}</h4>
      <AnimalDescription
        isToggled={state}
        animalImg={props.animal.img}
        description={props.animal.description}
        name={props.animal.name}
        onClick={onInfoToggle}
      />
    </div>
  );
};
 
const AnimalDescription = (props) => {
  if (props.isToggled) {
    return (
      <div className="animal-container__description" onClick={props.onClick}>
        <p> {props.description} </p>
      </div>
    );
  } else {
    return (
      <div className="animal-container__description" onClick={props.onClick}>
        <img src={props.animalImg} alt={props.name} />
      </div>
    );
  }
};
 
function filterAnimals(items, filterType) {
  if (filterType !== "") {
    return items.filter((x) => x.type === filterType);
  } else {
    return items;
  }
}
 
const Animals = (props) => {
  const [state, setState] = React.useState({
    items: [...props.animals],
    filteredItems: [...props.animals],
    currentFilter: "",
  });
 
  const onTypeChange = React.useCallback(
    (type) => {
      const filtered = filterAnimals(state.items, type);
  
      setState({
        ...state,
        filteredItems: filtered,
        currentFilter: type
      });
    },
    [state]
  );
 
  return (
    <section className="animals">
      <div className="animals__filters">
        <button className={state.currentFilter === "" ? "active" : null} onClick={() => onTypeChange("")}>All</button>
        <button className={state.currentFilter === "Dog" ? "active" : null}  onClick={() => onTypeChange("Dog")}>Dogs</button>
        <button className={state.currentFilter === "Cat" ? "active" : null}  onClick={() => onTypeChange("Cat")}>Cats</button>
        <button className={state.currentFilter === "Pig" ? "active" : null}  onClick={() => onTypeChange("Pig")}>Pigs</button>
      </div>
      {state.filteredItems.map(animal => {
        return (<Animal animal={animal} />);
      }
        
      )}
    </section>
  );
};
 
const App = () => {
  const animals = [
    { id: 1, name: "Dog1", type: "Dog", description: "Lucky dog" },
    { id: 2, name: "Dog2", type: "Dog", description: "Dog with mask" },
    { id: 3, name: "Dog3", type: "Dog", description: "Nice dog" },
    { id: 4, name: "Cat1", type: "Cat", description: "A lot of cats" },
    { id: 5, name: "Cat2", type: "Cat", description: "Sly cat" },
    { id: 6, name: "Cat1", type: "Cat", description: "Shy cat" },
    { id: 7, name: "Pig1", type: "Pig", description: "Funny pig" },
    { id: 8, name: "Pig2", type: "Pig", description: "Evil pig" },
    { id: 9, name: "Pig3", type: "Pig", description: "Angry pig" }
  ].map((animal) => ({
    ...animal,
    img: "https://picsum.photos/320/104?png"
  }));
 
  return (
    <div>
      <Animals animals={animals} />
    </div>
  );
};
 
ReactDOM.render(<App />, document.getElementById("root"));