Stuck in dependent drop down menu - node.js

Question

I got stuck while creating a dependent drop down menu in react. I am trying to make a form in which user can select three options through the drop down menu respectively and based on the options selected the 4th field which is a disabled text field will be populated with the appropriate result.
This is my code.
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">District</label>
<select className="form-select" value={selectedDistrict} onChange={handleDistrict} aria-label="Select District" >
<option value="Select District">Select District</option>
<option value={Data.data[0].DISTRICT}>{Data.data[0].DISTRICT}</option>
</select>
</div>
<div className="col-md-4">
<label htmlFor="inputPassword4" className="form-label">Assembly Constituency Number & Name.</label>
<select className="form-select" value={selectedConstituencyNameandNumber} onChange={handleConstituencyNameandNumber} aria-label="Select Assembly Constituency Number & Name." >
<option style={{"display": "block"}} value="Select Assembly Constituency Number & Name.">Select Assembly Constituency Number & Name.</option>
{selectedDistrict && acBooth.map((acBooth, index) => (
<option key={index} value={acBooth['AC No & Name']}>{acBooth['AC No & Name']}</option>
))}
</select>
</div>
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">Booth No.</label>
<select className="form-select" value={selectedBoothNumber} onChange={handleBoothNumber} aria-label="Select Booth No." >
<option value="Select Booth No.">Select Booth No.</option>
{selectedDistrict && partNumber.map((item, index) => (
<option key={index} value={item["Part No"]}>{item["Part No"]}</option>
))}
</select>
</div>
This is the code for 3 drop down menu. I want to execute a function which takes two parameter from the selected options in drop down menu and then display the output in the blank text field whose code is given below.
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">Booth Name</label>
<input type="text" disabled className="form-control" value={boothName} onChange={()=>{
const newName = getBoothName(selectedConstituencyNameandNumber, selectedBoothNumber);
setBoothName(newName);
console.log(newName);
}} id="inputUID" />
</div>
These are the function which I have written. It is working properly in the backend but I am unable to get the output in frontend.
const getBoothName = (acNo, partNo) => {
const boothName = Data.data.filter((item) => {
return item["AC No & Name"] === acNo && item["Part No"] === partNo
})
return boothName[0]["Part Name English"]
}
const [selectedDistrict, setSelectedDistrict] = useState('');
const [selectedConstituencyNameandNumber, setSelectedConstituencyNameandNumber] = useState('');
const [selectedBoothNumber, setSelectedBoothNumber] = useState('');
const handleDistrict = (e) => {
setSelectedDistrict(e.target.value);
}
const handleConstituencyNameandNumber = (e) => {
setSelectedConstituencyNameandNumber(e.target.value);
}
const handleBoothNumber = (e) => {
setSelectedBoothNumber(e.target.value);
}
A help is really appreciated.

Answer 1

The onChange function of your Input Textfield should be on the 3rd Select field. After that on change of your third dropdown it will setBoothName(newName) and your value will be set in the input textfield.
<div className="col-md-4">
<label htmlFor="inputEmail4" className="form-label">
Booth No.
</label>
<select
className="form-select"
value={selectedBoothNumber}
onChange={handleBoothNumber}
aria-label="Select Booth No."
>
<option value="Select Booth No.">Select Booth No.</option>
{selectedDistrict &&
partNumber.map((item, index) => (
<option key={index} value={item["Part No"]}>
{item["Part No"]}
</option>
))}
</select>
</div>
Change handleBoothNumber function in your code like this
const handleBoothNumber = (e) => {
setSelectedBoothNumber(e.target.value);
setBoothName(getBoothName(selectedConstituencyNameandNumber, selectedBoothNumber));
}