How to Set a Default Value for Select in React js?
2 years ago
admin
Reactjs
In today's lesson, we are going to see how to set the default value for the select box in react js.
Let's assume that we have a list of categories and we want to display a default value like 'choose a category' for the visitor.
Set the default value for the select box in react js
You can do that using the code below:
import React, { useEffect, useState } from "react";
import useCategories from "../../custom/useCategories";
export default function Create() {
const [category_id, setCategoryId] = useState("");
const [categories, setCategories] = useState([]);
useEffect(() => {
fetchCategories()
}, []);
const fetchCategories = async () => {
const fetchedCategories = await useCategories();
setCategories(fetchedCategories);
}
return (
<div className="row my-5">
<div className="col-md-6 mx-auto">
<div className="card">
<div className="card-body">
<form className="mt-5">
<div className="mb-3">
<label htmlFor="category_id" className="form-label">Category*</label>
<select
name="category_id"
onChange={(e) => setCategoryId(e.target.value)}
value={category_id}
className="form-select">
<option value="" disabled>Choose a category</option>
{
categories?.map(category => (
<option key={category.id} value={category.id}>{category.name}</option>
))
}
</select>
</div>
</form>
</div>
</div>
</div>
</div>
)
}