set default value for select menu from mongodb - reactjs

Question

I have a dropdown list which is populated from a database. The first option is 'none' (actual record in database with objectId) which should be the default option and only needs to be changed if the user wants to, otherwise it should just use that initial value when submitting the form. However, even though it is selected and has a valid objectId, I still get a validation error saying the field is empty. The validation error only goes away if I select something else from the select menu or select something else and then select 'none' again. I am using Joi-browser for validation.
schema = {
subcategoryId: Joi.string()
.required()
.label("Subcategory"),
}
This is the select menu:
<Form onSubmit={this.handleSubmit}>
<Form.Group controlId="subcategoryId">
<Form.Label>Sub-category</Form.Label>
<Form.Control
as="select"
name="subcategoryId"
value={this.state.data.subcategoryId}
onChange={this.handleChange}
error={this.state.errors.subcategory}
>
{this.state.subcategories.map(subcategory => (
<option key={subcategory._id} value={subcategory._id}>
{subcategory.name}
</option>
))}
</Form.Control>
{this.state.errors.subcategoryId && (
<Alert variant="danger">
{this.state.errors.subcategoryId}
</Alert>
)}
</Form.Group>
And here is my state:
state = {
data: {
name: "",
description: "",
categoryId: "",
subcategoryId: "",
price: ""
},
categories: [],
subcategories: [],
errors: {}
};
const { data: subcategories } = await getSubcategories();
this.setState({ subcategories });
And this is the html output of the dropdown's first field which I want selected by default:
<option value="5d4b42d47b454712f4db7c67">None</option>
The error I get back is that the category Id cannot be empty, yet each option in the select menu has a value. I am new to react but perhaps the value is only actually assigned upon change?

Answer 1

You need to edit componentDidMount. After you get your subcategories, you'll need to set the state to of this.state.data.subcategoryId to one of the categories. This is because you're using a controlled component. Otherwise, it'll still be set to "", which isn't one of the valid values for the <select> component, and likely why it's failing validation.
async componentDidMount() {
// getting a copy of this.state.data so as not to mutate state directly
const data = { ...this.state.data };
const { data: subcategories } = await getSubcategories();
// filter the array to a new array of subcategories that have the name === 'none'
const arrayOfSubcategoriesWhereNameIsNone = subcategories.filter(i => i.name === 'none');
const getIdOfFirstElementOfArray = arrayOfSubcategoriesWhereNameIsNone [0]._id;
//set getIdOfFirstElementOfArray equal to the function's local copy of this.state.data.subcategoryId
data.subcategoryId = getIdOfFirstElementOfArray;
// update the state with the mutated object (the function's local copy of this.state.data)
this.setState({ subcategories, data });
}