Cannot read property "name" of null reactjs

Question

I am new to React Hooks and I was creating an example with an object as Hook. I read that while changing the Hook its good practice to use the previous hook to change the same as we do with states using prevState. I created two input fields which will take my input and show the input in headings.

import React, {useState} from 'react'

function NameHook() {

    const [name, setName] = useState({firstName: '', lastName: ''})

    const changeName = e => {
        setName( prevName => (
            {
                ...prevName, 
                [e.target.name]: e.target.value
            })
        )
    }

    return (
        <div>
            <input 
                type="text"
                value={name.firstName}
                onChange={changeName} 
                name="firstName"
            />

            <input 
                type="text"
                value={name.lastName}
                onChange={changeName}
                name="lastName"
            />
            <h1>{name.firstName}</h1>
            <h1>{name.lastName}</h1>
        </div>
    )
}

export default NameHook

Now whenever I type the second character in the field I get the error

Cannot read property 'name' of null

I read in this answer that this is because REACT is recycling the event and changing the changeName function as below solves the error

const changeName = e => {
        e.persist()
        setName( prevName => (
            {
                ...prevName, 
                [e.target.name]: e.target.value
            })
        )
    }

But the code also works the same if I don't use the prevName and directly use setName with the current name value as below

const changeName = e => {
        setName( 
            {
                ...name, 
                [e.target.name]: e.target.value
            }
        )
    }

If the event is getting recycled is creating the problem then it should also create the problem when I am not using prevName because we are only changing the setName method in that. I am not getting why it is working now and why I am getting the error when I am using prevName.

I am aware of event pooling in react but I am not able to understand why it is not working when I am using prevName while setting the name and working when I am not using it in setName method — boost_insane, May 07 '20 at 05:49
When you're using the `setName` with an updated function (the `prevName`), the event is used later when that function is called, not immediately like when you pass an object literal directly. You could just store the values you need in local variables and use them in the updater function later. It's just the event object that can't be used in async code. — Emile Bergeron, May 07 '20 at 05:51
I wasn't aware of the fact that the setter function of hooks is async. This solves my doubt.Thanks — boost_insane, May 07 '20 at 06:03

score 0 · Answer 1 · answered May 07 '20 at 05:49

you can try in this way, I am also new at the react hooks, I tried to run this code in the following way and it runs

import React, {useState} from 'react'

function NameHook() {

    const [name, setName] = useState({firstName: '', lastName: ''})

    const changeName = e => {
      console.log(e.target.name);
      console.log(e.target.value);

        var oldname = name;
        var newname = {
          ...oldname,
          [e.target.name]: e.target.value
        }


        setName( newname)
    }

    return (
        <div>
            <input 
                type="text"
                value={name.firstName}
                onChange={(e)=>{changeName(e)}} 
                name="firstName"
            />
            <input 
            type="text"
            value={name.lastName}
            onChange={changeName}
            name="lastName"
        />
            <h1>{name.firstName}</h1>
            <h1>{name.lastName}</h1>
        </div>
    )
}

export default NameHook

If i add e.persist() to the code or don't use prevName in the setName method the code is working as I expect. but I want to know why it is not working with prevName. If it is because of event pooling then why event pooling isn't coming into picture when I am directly setting name without using prevName — boost_insane, May 07 '20 at 05:54

Cannot read property "name" of null reactjs

1 Answers1