Onchange event never triggered using select control in JSX

Question

I'm working with React trying to trigger the onChange event using a Select control in a functional component. The problem is when I select any available option, the onChange listener method is never triggered, this is my code:

import React, { useState } from 'react';
import './ExpensesFilter.css';

const ExpensesFilter = (props) => {
  const [year, setYear] = useState('');

  const yearChangeHandler = (event) => {
    /* setYear actualiza, por medio de useState, 
    a year de manera asincrona, useState es un hooks
     */
    setYear(event);
    console.log("the user is filtering by year");
    console.log("year selected: "+year);
  };

    return (
        <div className='expenses-filter'>
          <div className='expenses-filter__control'>
            <label>Filter by year</label>
            <select onChange={yearChangeHandler}>
              <option value='2022'>2022</option>
              <option value='2021'>2021</option>
              <option value='2020'>2020</option>
              <option value='2019'>2019</option>
            </select>
          </div>
        </div>
      );
}

export default ExpensesFilter;

This component is implemented like this:

import React, { useState } from 'react';
import './Expenses.css';
import ExpenseItemV3 from './ExpenseItemV3';
import Card from '../UI/Card';
import ExpenseFilter from './NewExpense/ExpensesFilter';

const Expenses = (props) => {

    return (
        <div>
            <Card className="expenses">
                <div>
                    <ExpenseFilter />
                    <ExpenseItemV3
                        title={props.records[0].title}
                        amount={props.records[0].amount}
                        date={props.records[0].date}>
                    </ExpenseItemV3>
                </div>
                ...

So far I'm out of ideas, your comments will be highly appreciated, thanks a lot

Dharman · Accepted Answer · 2021-06-10 16:50:36Z

1

To set the value of the selected option you will have to reach the event target value and set value to the select tag like this:

setYear(event.target.value);
<select value={year} onChange={yearChangeHandler}>

edited Jun 10, 2021 at 16:50

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jun 10, 2021 at 16:45

Marian Serafimov

774 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

htamayo Over a year ago

Thanks a lot for the hint @Marian, however, still can't output both console.log lines after setYear, what am I missing?

IAmRC1 · Accepted Answer · 2021-06-10 17:56:04Z

0

Just add the value={year} in the select tag and in the onChange method, set year to event.target.value. Also, the log statement of year should be outside the onChange handler. Works for me.

answered Jun 10, 2021 at 17:56

IAmRC1

1212 silver badges11 bronze badges

1 Comment

htamayo Over a year ago

got it, I'll try to chance the place of the console.log lines

Collectives™ on Stack Overflow

Onchange event never triggered using select control in JSX

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related