React change variable onChange-method - reactjs

Question

I am experimenting with React and I have the following problem. Different employees are listed in the "medewerker:" dropdown. When 1 is selected, the data is replaced by the value of the selection using the 'handelChangeEmployee' function in the 'employeeOrder' variable. In the console.log everything changes as expected. Only if I read variable: 'employeeOrder' will it continue to show the previously set value. and this is not being replaced, is this possible? and if so how?
So what I want to achieve is that when a selection is made, the value in the existing variable is replaced with the value of the selection.
The code that I am currently using is:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { Col } from "react-bootstrap";
import Close from '#material-ui/icons/Close';
import { render } from "react-dom";
const useStyles = makeStyles(styles);
export default function ChaskDesk() {
const employee = ["Robin","Raoul","Joppe "];
const service = ["Knippen","Scheren","Wassen"];
const counting = [1,2,3,4,5,6];
const gender = ["man", "vrouw", "kind"];
const client = ["Passant"];
let employeeOrder = 'Raoul';
const serviceOrder = [];
const countingOrder = [];
const genderOrder = [];
const clientOrder = "";
const payment = 0;
const classes = useStyles();
const handelChangeGender = function(event){
genderOrder.push(event.target.value);
console.log(genderOrder);
};
const handelChangeService = function(event){
serviceOrder.push(event.target.value);
console.log(serviceOrder);
};
let handelChangeEmployee = function(event){
console.log(employeeOrder);
employeeOrder = event.target.value;
console.log(employeeOrder);
};
return (
<div>
<Container className={classes.containerPixelActive}>
<h3>Afrekenen</h3>
<Row className={classes.tablePixelRow}>
<Col md={8} className={classes.rowChashdesk}>
<form>
<Row>
<Col md={6}>
<label>
Klant:
</label>
<br/>
<select >
{
client.map(function(item, i){
return <option key={i} value={item}>{item}</option>
})
}
</select>
</Col>
</Row>
<Row>
<Col md={6}>
<div className={classes.rowOfForm}>
<label>
Gender:
</label>
<br/>
<select onChange={handelChangeGender}>
{
gender.map(function(item, i){
return <option key={i} value={item}>{item}</option>
})
}
</select>
</div>
</Col>
</Row>
<Row>
<Col md={6}>
<div className={classes.rowOfForm}>
<label>
Behandeling:
</label>
<br/>
<select onChange={handelChangeService}>
{
service.map(function(item, i){
return <option key={i} value={item}>{item}</option>
})
}
</select>
</div>
</Col>
<Col md={6}>
<div className={classes.rowOfForm}>
<label>
Medewerker:
</label>
<br/>
<select onChange={handelChangeEmployee}>
{
employee.map(function(item, i){
return <option key={i} value={item}>{item}</option>
})
}
</select>
</div>
</Col>
</Row>
<Row>
<Col md={6}>
<div className={classes.rowOfForm}>
<label>
Verkregen behandeling:
</label>
<br/>
<input type="text" name="name" />
</div>
</Col>
<Col md={2}>
<div className={classes.rowOfForm}>
<label>
Aantal:
</label>
<br/>
<select>
{
counting.map(function(item, i){
return <option key={i} value={item}>{item}</option>
})
}
</select>
</div>
</Col>
<Col md={2}>
<div className={classes.rowOfForm}>
<label>
Prijs:
</label>
<br/>
<input type="text" name="name"/>
</div>
</Col>
<Col md={2}>
<div className={classes.rowIcon}>
<Close size={20} ></Close>
</div>
</Col>
</Row>
</form>
</Col>
<Col md={3} className={classes.rowChashdesk}>
<h5>Totaal overzicht</h5>
<h6>Medewerker</h6>
<p>{employeeOrder}</p>
<h6>Behandeling</h6>
<p>{serviceOrder}</p>
<h6>Aantal</h6>
<p>{countingOrder}</p>
<h6>Klant</h6>
<p>{clientOrder}</p>
<h6>Te betalen</h6>
<p>{payment}</p>
</Col>
</Row>
</Container>
</div>
);
}

Answer 1

The only way a react component knows to rerender is by your component (or some component above it) settings state. You're not using state, so it doesn't rerender.
Change this:
let employeeOrder = 'Raoul';
To this:
import { useState } from 'react';
// ... code omitted
const [employeeOrder, setEmployeeOrder] = useState('Raoul')
And change your handler to:
const handelChangeEmployee = function(event) {
setEmployeeOrder(event.target.value)
}
You will need to do similar things for genderOrder and ServiceOrder. You can't just push into an array and expect the page to update, you need to set state to a new array to cause the component to rerender. Don't mutate the old array, create a new one, as in:
setGenderOrder([...genderOrder, event.target.value])
For more info on useState and other hooks, see this page