• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error