Not able to update my state variable using react useState hooks setter

Vadiraj Kanakagiri 0
Viewed 30

Below is the code for the functional component. I'm updating the state inline with onClick event handler and it displays the updated data inside the useEffect. But as soon as the control comes out of the useEffect, the state variable 'data' gets back to its previous data. I have tried updating it without useEffect first, but the problem is the same. I'm not able to access the updated state variable in other functions.

function Task(props) {
    var initialData = {
        id: '1',
        content: 'somecontent',
        linkedPage: 'somepage',
    };

    const [data, setData] = useState(initialData);

    useEffect(() => {
        console.log(data);
    }, [data]);

    const saveTask = () => {
        console.log(data);
        const obj = {
            name: data.content,
            id: data.id,
        };
    };

this is the button where I'm updating the state

                                       <button
                                        className="btn btn-sm btn-secondary px-4"
                                        id={props.task.id}
                                        onClick={() =>
                                            setData({
                                                ...data,
                                                id: props.task.id,
                                                content: props.task.content,
                                                linkedPage: props.task.linkedPage,
                                            })
                                        }
                                        data-toggle="modal"
                                        data-target="#exampleModalCenterViewss"
                                    >
                                        Edit
                                    </button>

Please someone explain me why the state is not updating properly.

state reactjs
2 Answers

You can set it like;

    onClick={() =>{ 
data.id = props.task.id
data.content = props.task.content
data.linkedPage = props.task.linkedPage
setData(data)
    }
}

You should write it as a function . It will be more clear for you.

function setOnClickFunction(){
    data.id = props.task.id
    data.content = props.task.content
    data.linkedPage = props.task.linkedPage
    setData(data)
}

onClick={()=> setOnClickFunction() }
Onur Doğan0

First of all, don't use vars - bad practice. Learn the differences between var and let/const. The second thing is that you don't need to write this line: setData({...data}). The proper way to update the state is this one:

setData(prevData  => ({ ...prevData, 
                        id: props.task.id,
                        content: props.task.content,                         
                        linkedPage: props.task.linkedPage }))

setState in functional components can take a callback function instead of a piece of data, because it works asynchronously, and to get previousData, you need to get it from this callback function.

Ervin0
Related