How to Set a Default Value for Select in React

In today's lesson, we are going to see how to set the default value for the select box in React.

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

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>
    )
}