Udemy React Complete Guide 2023 Section 5 Assignment 2: Expenses Filter

ExpensesFilter.js

import React from 'react';

import './ExpensesFilter.css';

const ExpensesFilter = (props) => {
    const [selectedYear, setSelectedYear] = React.useState('2020');
    const selectYearHandler = (e) => {
        setSelectedYear(e.target.value);
        props.onSelectYear(e.target.value);
    }
    return (
        <div className='expenses-filter'>
            <div className='expenses-filter__control'>
                <label>Filter by year</label>
                <select 
                name="selectedYear" 
                value={selectedYear}
                onChange={e => setSelectedYear(e.target.value)}
                 >
                    <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;