How to set default value in Select Component? - reactjs

Question

On React Carbon Select component I want to have a default selected option, which can be changed, of course.
In general my goal is to implement edit functionality. It means user should be able to change already selected option.
I tried with adding the value property directly in Select like value={defaultSelected} or defaultValue={defaultSelected} but it didn't work.
Code example.
import React, { useState } from 'react';
import { Select, SelectItem } from '#carbon/react';
const options = [
{
value: 'apple',
text: 'Apple 🍏',
},
{
value: 'banana',
text: 'Banana 🍌',
},
{
value: 'kiwi',
text: 'Kiwi 🥝',
},
];
const SelectCarbon = ({defaultSelected}) => {
const [formData, setFormData] = useState();
const onChange = e => {
setFormData({
...formData,
fruit: e.target.value,
});
};
console.log('formData', formData);
return (
<>
{defaultSelected}
<Select id="select-fruits" onChange={onChange} value={defaultSelected}>
<SelectItem text="select Option" value="" />
{options.map(option => (
<SelectItem
key={option.value}
text={option.value}
value={option.value}
/>
))}
</Select>
</>
);
};
export default SelectCarbon;
Any help will be appreciated

Answer 1

Try This
const [formData, setFormData] = useState({
fruit: options[0].value
});
And note that formDate should be an object not array.

Answer 2

I came up with this solution conditionally showing either default value if nothing is selected or selected value.
And in order show the default value initially, I wrapped in formData in useEffect.
React.useEffect(() => {
setFormData({
...formData,
fruit: defaultSelected,
});
}, [defaultSelected]);
const onChange = e => {
setFormData({
...formData,
fruit: e.target.value ?? defaultSelected,
});
};
console.log('formData', formData);
return (
<>
{defaultSelected}
<Select
id="select-fruits"
onChange={onChange}
defaultValue={defaultSelected}>
<SelectItem text="select Option" value="" />
{options.map(option => (
<SelectItem
key={option.value}
text={option.value}
value={option.value}
/>
))}
</Select>
</>
);
};
export default SelectCarbon;