<select value={author} onChange={({ target }) => setAuthor(target.value)} >
{authors.map(author =>
<option key={author.name} value={author.name}>
{author.name}
</option>)}
</select>
This is in React/NodeJS. Everything works as expected, and the first option/author.name is displayed by default. However, it is not being set as the default value for the React state, and clicking on the dropdown and then selecting it does not change this. If another option is selected and then you select the first option, it works as expected.
You need to set the state (author in this case) for the first time manually, because the onChange event only fires when you change the selected option, so it does not set the state when it loads. you have two option:
const [author,setAuthor] = useState(authors[0].name)
useEffect(()=>{
if(authors && authors.length>0){
setAuthor(authors[0].name);
},[authors])