How to fetch option value from select in React - reactjs

Question

I'm looking for a way to get option value from select.
Main point for this is that i want to get value from select and then display different car from carArray.
I'm still learning react so please just tell me which way i should go.
My code:
import React, { useState } from 'react'
const UserCar = () => {
const carArray = [
{id: 1,name: "Opel Astra", brand: "Opel", model: "Astra J ST SPORT 2.0 CDTI", plate: "KGR XXX"},
{id: 2,name: "Opel Frontera", brand: "Opel", model: "Frontera 2.2DTI 4x4", plate: "KGR XXX1"},
{id: 3,name: "Peugeot 207", brand: "Peugeot 207", model: "Peugeot 207 1.4", plate: "KGR XXX2"},
]
const handleChange = (event) => {
const aaa = this.setState({value: event.target.value});
console.log(aaa);
}
return (
<div>
<select onChange={handleChange}>
{
carArray.map(function(element){
return(
<option value={element.name}> {element.name}</option>
)
})
}
</select>
/*****\/ Here i want to display car details depend on which one option is selected *****/
<form>
<fieldset disabled>
<legend>Twój samochód: </legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Marka Pojazdu</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Opel" />
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Model Pojazdu</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Astra J ST SPORT 2.0 CDTI " />
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Rejestracja</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="KGR XXX" />
</div>
</fieldset>
<button type="submit" class="btn btn-primary m-4 float-end">Zmień</button>
</form>
</div>
)
}
export default UserCar

Answer 1

There are several problems with your JSX code.
1. JSX syntax
HTML attribute for should be replaced with htmlForm.
HTML attribute class should be replaced with className.
2. In the functional component, you need to use useState hook instead of this.setState.
3. Correct implementation.
Define state variable to store the selected car info.
const [selectedCar, setSelectedCar] = useState();
In OnChange function in select element, you will update the selectedCar state variable.
setSelectedCar(carArray.find((ele) => event.target.value == ele.id));
Your component UserCar should look like the following.
const UserCar = () => {
const [selectedCar, setSelectedCar] = useState<any>();
const carArray = [Your car array];
const handleChange = (event) => {
setSelectedCar(carArray.find((ele) => event.target.value == ele.id));
};
return (
<div>
<select onChange={handleChange}>
{carArray.map((element) => {
return (
<option key={element.id} value={element.id}>
{element.name}
</option>
);
})}
</select>
{selectedCar && (
<div>
{selectedCar.name}, {selectedCar.brand}, {selectedCar.model}
</div>
)}
<form>
...
</form>
</div>
);
};