Can't get value of selected option - reactjs

Question

I am trying to create a dashboard in react. I want to be able to select today, yesterday. this week. etc, and have data change. I am trying to do this by using:
<select onChange={handlefilter}>
{data.map((item) => (
<option value={item.id}>{item.tag}</option>
))}
</select>
where data =
let data = [
{id: 1, tag: "today" },
{id: 2, tag: "yesterday" },
{id: 3, tag: "this week" },
{id: 4, tag: "this month" },
{id: 5, tag: "all time" },
]
From here I wanted to use the handlefilter to find the id selected and then from there create conditions. The issue that I am having is that I can't get the value of the ids.
Full DashboardScreen.js
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { render } from "react-dom";
import Chart from 'react-google-charts';
import { summaryOrder } from '../actions/orderActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
export default function DashboardScreen() {
const orderSummary = useSelector((state) => state.orderSummary);
const { loading, summary, error } = orderSummary;
const dispatch = useDispatch();
useEffect(() => {
dispatch(summaryOrder());
}, [dispatch]);
let order = [
{id: 1, tag: "today" },
{id: 2, tag: "yesterday" },
{id: 3, tag: "this week" },
{id: 4, tag: "this month" },
{id: 5, tag: "all time" },
]
const handleFilter = () => {
console.log(order.id)
}
return (
<div>
<div className="line">
</div>
<div className="background">
{loading ? (
<LoadingBox />
) : error ? (
<MessageBox variant="danger">{error}</MessageBox>
) : (
<>
<ul className="row summary">
<li>
<div className="summary-title color1">
<select onChange={handlefilter}>
{order.map((item) => (
<option value={item.id}>{item.tag}</option>
))}
</select>
</div>
</li>
<li>
<div className="summary-title color1">
<span>
<i className="fa fa-users" /> Users
</span>
</div>
<div className="summary-body">{summary.users[0].numUsers}</div>
</li>
<li>
<div className="summary-title color2">
<span>
<i className="fa fa-shopping-cart" /> Orders
</span>
</div>
<div className="summary-body">
{summary.orders[0] ? summary.orders[0].numOrders : 0}
</div>
</li>
<li>
<div className="summary-title color3">
<span>
<i className="fa fa-money" /> Sales
</span>
</div>
<div className="summary-body">
$
{summary.orders[0]
? summary.orders[0].totalSales.toFixed(2)
: 0}
</div>
</li>
</div>
<div>
</div>
</>
)}
</div>
</div>
);
}
I would really appreciate any help or advice on how to do this. Thank you!

Answer 1

You need to change select to :
<select onChange={handleFilter}>
Then update your handler to :
const handleFilter = (e) => {
console.log(e.target.value); // this is the order.id
}

Answer 2

Just update your function to as follows:
const handleFilter = (e) => {
console.log(e.target.value);
};
This will give you the id of selected element.

Answer 3

There are some problems with your code.
The main one is you are trying to read the id from order object, whereas you should read it from the event argument in handleFilter function.
The second is to always use key when you are mapping an array inside your render. So React can understand the difference.
And another optimization is to move your order array out of your component. Because it's not changing and you improve the performance with this little change.
The last thing is to let the React control the value of your form elements (input, select, etc.) for you. (Thanks John Detlefs for his comment)
So here is the optimal code for you:
import { useState } from "react";
const order = [
{ id: 1, tag: "today" },
{ id: 2, tag: "yesterday" },
{ id: 3, tag: "this week" },
{ id: 4, tag: "this month" },
{ id: 5, tag: "all time" }
];
export default function App() {
const [activeOption, setActiveOption] = useState();
const handleFilter = (event) => {
setActiveOption(event.target.value)
// console.log(event.target.value);
};
return (
<select value={activeOption} onChange={handleFilter}>
{order.map((item) => (
<option key={item.id} value={item.id}>
{item.tag}
</option>
))}
</select>
);
}