I am trying to pass the "year" value back from a child component to the parent component. I am able to get the value passed back however after my props/function runs in the child component it resets the selection option to the default "choose a year" (but correctly passes the chosen year back to the parent component).
I am not sure if it is due to me mapping through the array and the function refreshing the component after each change?
function MapComponent() {
const [input1, setInput1] = useState("");
const setVehicleInfoInput = (value) => {
setInput1(value)
}
return (
{input1} // shows the selected year from child component
<VehicleInput setVehicleInfoInput={setVehicleInfoInput} sendYear={input1} />
)
export default React.memo(MapComponent)
const VehicleInput = ({setVehicleInfoInput, sendYear}) => {
let vehicleYearsArray = ["2000","2001","2002","2003" etc ]
let handleYearSelection = (e) => {
setVehicleInfoInput(e.target.value)
}
return (
// sends the chosen year to parent component but then resets to "choose a year" rather than also showing the chosen year in the dropdown/select
<select value={sendYear} className='vehicleInput' onChange={handleYearSelection}>
<option value="Choose a Year"> -- Choose a Year -- </option>
{vehicleYearsArray.map((year) => (
<option value={year}>{year}</option>
))}
</select>
)
export default VehicleInput;
Thank you for any assistance