Line 18:54: 'filteredYear' is not defined no-undef

Solution 1:

I think you just have a typo: you name your state variable pickedYear but seems you refer to it later as filteredYear.

As for the "search for the keywords" message, this is coming from eslint. Eslint uses "keywords" for all of its rules. The eslint rule that is being triggered is

• no-undef

Searching for this shows the relevant eslint docs on this specific rule (https://eslint.org/docs/rules/no-undef), but you probably don't need the full docs to show what the issue is since this rule is more straight forward that some of eslint's other rules.

The error message is telling you exactly what it says: that filteredYear on line 18 is not defined. The only place you have filteredYear defined is within your selectedFilterYear function, which defines that as the only argument it accepts.

To fix this, just use the same state variable you've already set:

// Here you name your piece of state `pickedYear`
const [pickedYear, setPickedYear] = useState('2020');

const filteredExpenses = props.items.filter(expense => {
    // So refer to that same `pickedYear` variable here 👇
    return expense.date.getFullYear().toString() === pickedYear;
});