When dynamically adding element, state stays at default value inside this element - reactjs

Question

I'm trying to dynamically add button to my component when selecting a value in a select. Adding the button to my page works fine, but the state of the component inside the callback function of the button stays at its default value.
I have the following implementation:
const Component = () => {
const [value, setValue] = useState('');
const [buttons, setButtons] = useState([]);
const onChangeValue = (e) => {
setValue(e.target.value);
setButtons([...buttons,
<button
onClick={() => console.log(value)} // displays '' which is the default state
>
Try me
</button>
]);
}
return (
<div>
<select onChange={onChangeValue}>
<option value={1}>Option #1</option>
<option value={2}>Option #2</option>
<option value={3}>Option #3</option>
</select>
{buttons}
</div>
);
}
I would guess that the state of my component is not "connected" to the buttons, but I'm not sure how I can do it.

Answer 1

I think the onClick event is trying to console log the wrong variable. You should put event.target.value instead of just value.

Answer 2

You can create custom components and pass the dynamic value from useState as a prop:
const Component = () => {
const [value, setValue] = useState('');
const [buttons, setButtons] = useState([]);
const onChangeValue = (e) => {
setValue(e.target.value);
setButtons([...buttons,
(props) => <button
onClick={() => console.log(props.value)}
>
Try me
</button>
]);
}
return (
<div>
<select onChange={onChangeValue}>
<option value={1}>Option #1</option>
<option value={2}>Option #2</option>
<option value={3}>Option #3</option>
</select>
{buttons.map((B, i) => <B key={i} value={value}/>)}
</div>
);
}

Answer 3

The issue in your code is because of useState since useState is asynchronous. So at the time component is creating so the value is "empty" as its not updated because of asynchronous. The better way is to kind of closure which remember its state. You can simply do this by saving variable state:
Here is the code:
const Component = () => {
const [value, setValue] = useState("");
const [buttons, setButtons] = useState([]);
const handleClick = (val) => console.log(val);
const onChangeValue = (e) => {
e.persist();
const val = e.target.value;
setValue(e.target.value);
if (buttons.length < 3) {
//avoid unnecessary addition
setButtons([
...buttons,
<button
key={value}
onClick={() => handleClick(val)} // displays '' which is the default state
>
Try me
</button>
]);
}
}
Here is the demo: https://codesandbox.io/s/sharp-oskar-qnm51?file=/src/App.js:65-633