Cannot read property 'map' of undefined react 17

Question

Currently, I started learning to react in the Udemy course "react-for-the-rest-of-us". now, I'm trying to approach the state hook from the child component, and I get the above error. my target is to add another element to the state by getting it's values from the user input this is the parent component:

    import React, { useState } from "react";
    import AddPetForm from "./FormPet";
    function Header(props) {
      const [pets, setPets] = useState([
        { name: "Meowsalot", species: "cat", age: "5", id: 123456789 },
        { name: "Barksalot", species: "dog", age: "3", id: 987654321 },
        { name: "Fluffy", species: "rabbit", age: "2", id: 123123123 },
        { name: "Purrsloud", species: "cat", age: "1", id: 456456456 },
        { name: "Paws", species: "dog", age: "6", id: 789789789 },
      ]);
    
      const pet = pets.map((pet) => (
        <Pet name={pet.name} species={pet.species} age={pet.age} id={pet.id} />
      ));
      return (
        <div>
          <LikedArea />
          <TimeArea />
          <ul>{pet}</ul>
          <AddPetForm set={setPets} />
        </div>
      );
    }
    function Pet(props) {
      return (
        <li>
          {props.name}is a {props.species} and is {props.age} years old
        </li>
      );
    }

and this is the child component:

    import React, { useState } from "react";
    
    function AddPetForm(props) {
      const [name, setName] = useState();
      const [species, setSpecies] = useState();
      const [age, setAge] = useState();
      console.log(props.set);
      function handleSubmit(e) {
        e.preventDefault();
        props.set((prev) => {
          prev.concat({ name: name, species: species, age: age, id: Date.now() });
          setName("");
          setSpecies("");
          setAge("");
        });
      }
    
      return (
        <form onSubmit={handleSubmit}>
          <fieldset>
            <legend>Add New Pet</legend>
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Name"
            />
            <input
              value={species}
              onChange={(e) => setSpecies(e.target.value)}
              placeholder="species"
            />
            <input
              value={age}
              onChange={(e) => setAge(e.target.value)}
              placeholder="age in years"
            />
            <button className="add-pet">Add Pet</button>
          </fieldset>
        </form>
      );
    }
    
    export default AddPetForm;

Answer 1

You aren't returning the new concatenated array. So when you call props.set it should be this:

props.set((prev) => {
      setName("");
      setSpecies("");
      setAge("");
      return prev.concat({ name: name, species: species, age: age, id: Date.now() });
});

If you don't return anything, then technically the return value is undefined, so that's what it sets the state to. Then you get the error when you try to .map it