onChange useState one character behind - reactjs

Question

I have a simple search component and I want to build an autocomplete filter, but my onChange event handler is one character behind.
If I type "tsla" into the search bar my value will be "tsl"
<TextField
className={classes.queryField}
fullWidth
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SvgIcon fontSize="small" color="action">
<SearchIcon />
</SvgIcon>
</InputAdornment>
)
}}
onChange={event => {
setValue(event.target.value);
setAuto(
tickers
.filter(
f =>
JSON.stringify(f)
.toLowerCase()
.indexOf(value) !== -1
)
.slice(0, 10)
);
console.log(auto);
}}
value={value}
placeholder="Search for a stock"
variant="outlined"
/>

Answer 1

The issue is that you are sill using the old value variable when you call setAuto.
const Search = (props) => {
handleChange = (event) => {
const value = event.target.value
setValue(value);
setAuto(tickers.filter((ticker) => JSON.stringify(ticker).toLowerCase().indexOf(value) !== -1).slice(0, 10));
console.log(auto);
};
return (
<TextField
className={classes.queryField}
fullWidth
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SvgIcon fontSize="small" color="action">
<SearchIcon />
</SvgIcon>
</InputAdornment>
),
}}
onChange={handleChange}
placeholder="Search for a stock"
value={value}
variant="outlined"
/>
);
};
The solution is to pass the new value object to both setValue and to setAuto.
handleChange = (event) => {
const value = event.target.value
setValue(value);
setAuto(tickers.filter((ticker) => JSON.stringify(ticker).toLowerCase().indexOf(value) !== -1).slice(0, 10));
console.log(auto);
};