0

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

fugazzi
  • 17
  • 2

0 Answers0