useState displays previous state when getting value from onChange event

Question

I don't really have much experience with React but I was trying to work on a small project for myself.

So I have this dropdown list, which has 2 values, and I'm trying to console.log the current state of camera which should hold the values for the list option that you click on.

So let's say I click on an option for the 1st time, I get a log of an empty value (the initial state of my camera), then I click on the other option and I get logged the option that I clicked the 1st time. From what I understand this might be due to the fact that setState is async ?

Even so, what should I do to fix my problem, so that when I click for the first time on an option it logs the actual option ? I'm thinking of using useEffect someway but I can't really figure out how to use it for handling events. This is my code:

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom';
import style from './Join.module.css';

const Join = () => {

    const [nume, setNume] = useState('')
    const [camera, setCamera] = useState('')


    return (
        <div className={style.mainJoinContainer}>
            <div className={style.secondaryJoinContainer}>
                <h1 className={style.header}>
                    Conecteaza-te!
                    <div>
                        <input placeholder="Nume" className={style.joinInput} type="text" onChange={(event) => { setNume(event.target.value); console.log(nume) }} />
                    </div>
                    <div className={style.margin}>
                        <label>Camera</label>
                        <select name="Camere" placeholder="Camere" onChange={(event) => { setCamera(event.target.value); console.log(camera) }}>
                            <option value="Camere" style={{ display: "none" }}>Camere</option>
                            <option value="Gluma">Gluma</option>
                            <option value="Joke">Jokes</option>
                        </select>
                    </div>
                    <Link to="/interaction/chat">
                        <button className={`${style.joinButton} ${style.margin}`} type="submit">Logheaza-te</button>
                    </Link>
                </h1>
            </div>
        </div >
    )
}

export default Join

I will appreciate any sort of guidance for this problem. I've tried looking up some similar situation and tried useEffect or async-await for some reason, but I can't really figure it out myself. Thank you for your time!

console.log right after a setState call will always log the state of the current render, not the updated value. This is the intended functionality. The updated state will not be available until the next render. see: [Console.log() after setState() doesn't return the updated state](https://stackoverflow.com/questions/54713510/console-log-after-setstate-doesnt-return-the-updated-state) — pilchard, Dec 30 '20 at 22:56

score 2 · Accepted Answer · answered Dec 30 '20 at 23:01

2

You can use useEffect to "watch" a state variable.

useEffect(() => {
    // do stuff
    console.log(camera);
}, [camera]);

answered Dec 30 '20 at 23:01

Will

3,201
1
19
17

useState displays previous state when getting value from onChange event

1 Answers1