How to change state in react typescript

Question

I am working with react typescript and can not change state in typescript. Within editing function I have setId and setEdit, so after executing editing function it does not change the state.

Here code below:

import React, { useState, useRef, useEffect, useCallback } from "react";
import "../App.css";

const HomePage: React.FC = () => {
    const [todo, setTodo]: any = useState([]);
    const [id, setId]: any = useState(null);
    const [edit, setEdit]: any = useState(false);

    const ref = useRef<HTMLInputElement>(null);

    const editing = (nameId: any, nameTitle: any) => {
        setId(nameId);
        setEdit(true);
        console.log(id);
        console.log(edit);
        ref.current!.value = nameTitle;
    };

    return (
        <div className="container">
            <div id="task-container">
                <div id="list-wrapper">
                    {todo.map((todo: any, index: number) => {
                        return (
                            <div key={index} className="task-wrapper flex-wrapper">
                                <div style={{ flex: 7 }}>
                                    {todo.completed == false ? (
                                        <span>{todo.title}</span>
                                    ) : (
                                            <span>{todo.title}</span>
                                        )}
                                </div>

                                <div style={{ flex: 1 }}>
                                    <button 
                                        onClick={() => { editing(todo.id, todo.title) }} 
                                        className="btn btn-sm btn-outline-info">Edit
                                    </button>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </div>
    );
};

export default HomePage;

Not sure what i am missing.

See the above duplicate, then move the console logs into the component body and you will see that they do update, just not until the next render. — Brian Thompson, Jul 24 '20 at 21:01
Does this answer your question? [variable in react hook is not updated](https://stackoverflow.com/questions/63019578/variable-in-react-hook-is-not-updated) — Luke Storry, Jul 24 '20 at 21:04
Typescript doesnt have to anything with state changes :), use hooks useEffect when something has changed , pass it to dependency array in useEffect and do your logic in useEffect — Shushanth Pallegar, Jul 24 '20 at 21:09

score 1 · Accepted Answer · answered Jul 24 '20 at 21:17

const editing = (nameId: any, nameTitle: any) => {
    setId(nameId);
    setEdit(true);
    console.log(id);
    console.log(edit);
    ref.current!.value = nameTitle;
};

setId and setEdit do not execute immediately so id and edit will be logged to the console with their current (old) values.

To do something after the state has changed in a functional component, use useEffect().

const [todo, setTodo]: any = useState([]);
const [id, setId]: any = useState(null);
const [edit, setEdit]: any = useState(false);

useEffect(() => {
    console.log(id);
    console.log(edit);
});

score 0 · Answer 2 · answered Jul 24 '20 at 21:05

From the React Docs, State Updates May Be Asynchronous, ie they will not happen immediately, only on the next re-render.

This is to allow the state updates to be batched together for better performance.

Move the console logs out into the component, or into render, and you'll see them change upon re-render.

How to change state in react typescript

2 Answers2