Why forEach if returns []? - reactjs

Question

I have an array with some orders, the name the array is getOrdersBySalesman. The orders have some attributes : id, client, stage. I want to filter the order by stage, but I it doesn't work,
When I select for example "PENDENT" why the console.log is [] I need to send the result of filterOrders to another component and I don't have result. What is wrong????
const Comandes = () => {
const [orderStage, setOrderStage] = useState('')
useEffect(() => {
setOrderStage(orderStage)
}, [orderStage])
let filterOrders = []
const filterStage = newStage => {
getOrdersBySalesman.forEach(order => {
if (order.stage === newStage) {
filterOrders.push(order)
}
});
setOrderStage(newStage)
}
console.log(filterOrders) = > IS []
return (
<div>
<Layout>
<select
value={orderStage}
onChange={e => filterStage(e.target.value)}
>
<option value="TOTS ELS ESTATS">TOTS ELS ESTATS</option>
<option value="ACABADA">ACABADA</option>
<option value="PENDENT">PENDENT</option>
<option value="CANCELADA">CANCELADA</option>
</select>
{filterOrders.length === 0 ? (
<p className="mt-5 text-center text-2xl">Encara no hi ha comandes </p>
) : (filterOrders.map(order => (
<Order key={order.id} order={order} />
))
)}
</Layout>
</div >
)
}
export default Comandes

Answer 1

Actually Array#forEach won't return anything and it's just going to run on select, onChange event. So you should either wait for changing select. Also, for better performance, you should use Array#filter and useState hook instead of declaring a variable and using Array#forEach.
So your final code should be something like this:
const [filterOrders , setFilterOrders ] = useState([])
const filterStage = (newStage) => {
setFilterOrders(getOrdersBySalesman.filter(
(order) => order.stage === newStage
));
setOrderStage(newStage);
};
useEffect(()=> {
console.log(filterOrders);
}, [filterOrders]);