Why select tag value is not showing the default value when page is loaded

Question

I have a select tag with three options. I set a default value using state. But when the page load the default value is not showing. It is showing the first option. My console is not showing any error or hint so that I can solve the problem.

Here is my code.

import React, { useState } from 'react';
import Card from '../card/Card';
import ExpenseFilter from '../expense-filter/ExpenseFilter';
import ExpenseItem from '../expense-item/ExpenseItem';
import './Expenses.css';

const Expenses = props => {
  const [value, setValue] = useState('2022');

  const { items } = props;

  const selectHandler = event => {
    setValue(event.target.value);
  };

  return (
    <Card className="expenses">
      <ExpenseFilter value={value} selectHandler={selectHandler} />
      {items.map(expense => (
        <ExpenseItem
          key={expense.id}
          date={expense.date}
          title={expense.title}
          amount={expense.amount}
        />
      ))}
    </Card>
  );
};

export default Expenses;

import React from 'react';

const ExpenseFilter = props => {
  return (
    <div className="my-3">
      <select
        value={props.value}
        onChange={props.selectHandler}
        className="form-select"
        aria-label="Default select example">
        <option value="1">2020</option>
        <option value="2">2021</option>
        <option value="3">2022</option>
      </select>
    </div>
  );
};

export default ExpenseFilter;

How can I solve the problem? I want to get the default value when page loaded.

Answer 1

Update you <option> 's value attributes.

<select
   value={props.value}
   onChange={props.selectHandler}
   className="form-select"
   aria-label="Default select example">
   <option value="2020">2020</option>
   <option value="2021">2021</option>
   <option value="2022">2022</option>
</select>