React update the value after rendering

Question

Hi everyone,

I have this React component and I want to update the State of city when I change the text input. the issue here that react update this value after finishing the function executing or after rendering. So when I enter the first value show empty string and in the second value it shows me the previous one.

for ex:

input=> n , (output)city=>""
input=> ne , (output)city=>"n"

function Weather() {
    const [city, setCity] = useState('');
    const [temp, setTemp] = useState(0);
    const [display, setDisplay] = useState(false);
    const classes = useStyles();
    var preTimeout = null;

    const fetchWether = () => {
        const host = 'http://127.0.0.1';
        const port = '4000';
        axios
            .get(`${host}:${port}/weather`, {
                params: {
                    city: city,
                },
            })
            .then((res) => {
                console.log(res.data);
                setDisplay(true);
            })
            .catch((err) => {
                console.log(err);
            });
        return false;
    };

    const handleChange = (e) => {
        setCity(e.target.value);
        console.log(city);
        chooseWord();
    };

    const chooseWord = () => {
        console.log(city);
        // if (preTimeout) clearTimeout(preTimeout);
        // if (city !== '') {
        //     console.log('Serarching the data');
        //     preTimeout = setTimeout(() => fetchWether(), 3000);
        // }
        // console.log({ city });
    };

    return (
        <div>
            <div className={classes.margin}>
                <Grid container spacing={1} alignItems="flex-end">
                    <Grid item>
                        <ApartmentIcon
                            style={{ color: green[500] }}
                            className={classes.icon}
                        />
                    </Grid>
                    <Grid item>
                        <TextField
                            id="input-with-icon-grid"
                            label="City"
                            onChange={(e) => {
                                handleChange(e);
                            }}
                        />
                    </Grid>
                </Grid>
            </div>
        </div>
    );
}

export default Weather;

Answer 1

No you are testing it in a wrong way,if you want to test the change do it like this:

useEffect(()=>{

console.log(city);

},[city]);

this will show you the correct value of city. As soon as the city value gets updated this useEffect will come into the picture and console.log will print the updated value