Passing useState function as prop to another component-CodePudding

Im trying to pass a useState function to another prop, but i get the following error: Uncaught RangeError: Maximum call stack size exceeded

I added the useState function as a handleevent for a buttonClick in the child component, and im assuming that error means it gets called in a loop? Can anyone help me understand the issue here? The code is as follows:

    function App() {
        const[personListe, setPersonListe] = useState([
          {
            firstName:'Test',
            lastName:'testing',
            getFullName:function()
            {
                return `${this.firstName} ${this.lastName}`
            },
            age:28
            },
        ]);
  
      return (<>
          <Header />
          <h1>Welcome to my react page!</h1>
          <Inputfields personListe={personListe} addPerson={setPersonListe} />
          <PersonList personListe={personListe}/>
        </>
      );
    }

Child component(Inputfields.js):

export default function Inputfields({personListe}, {addPerson})
{
    function addPerson()
    {
        let firstName = document.getElementById("firstNameID");
        let lastName = document.getElementById("lastNameID");
        let age = document.getElementById("ageID");
        if(firstName.value.length < 1 || lastName.value.length < 1 || age.value.length < 1)
        {
            alert("Please fill out all the fields!");
        }
        else
        {
            addPerson(
                {
                    firstName:firstName.value,
                    lastName:lastName.value,
                    age:age.value
                }
            );
            firstName.value = "";
            lastName.value = "";
            age.value = "";

        }
    }
    return(
        <>
            <Input id="firstNameID" placeholder="First name" /> <br />
            <Input id="lastNameID" placeholder="Last name" /> <br />
            <Input id="ageID" placeholder="Age" type="number" /> <br />
            <Button variant="contained" sx={{marginTop:2}} onClick={addPerson}>Add person</Button>
        </>
    );
}

CodePudding user response：

There are two issues here. First, you're not destructuring the props correctly. There is one props object passed to the component, not two. Destructure the two props from that one object:

export default function Inputfields({personListe, addPerson})

Second, and much more importantly... You never use the addPerson prop being passed here. The very first thing your component does is shadow that variable with a new function of the same name:

function addPerson()
{
  //...
}

Then that function recursively calls itself until the stack overflows.

Don't shadow the variable. Give the function its own name. For example:

function myAddPerson()
{
  //...
}

Then within that function you can call the addPerson which was passed to the component. In the JSX markup call your local function:

<Button variant="contained" sx={{marginTop:2}} onClick={myAddPerson}>Add person</Button>

Basically this isn't a React issue at all. This is plain JavaScript. If you assign a new value to a variable (and defining a function by the same name does exactly that) then the original value is lost.

CodePudding user response：

you didn't destruct the props function properly you need to do it like that.

export default function Inputfields({personListe,addPerson}) {...rest of your code}