Getting wrong values from select input

Question

so basically I have set a state holding different values of a form with inputs with text type and two inputs of select type.

const [foodTemplateDetails, setFoodTemplateDetails] = useState({
  menu: '',
  description: '',
  mealTime: '',
  extraServings: true,
  isActive: true,
  subscriptionDuration: '',
});

while trying to get the data onchange of the input, I am accurately getting the ones with the text type but my problem involves the ones with the select type.

const handleInputChange = (e: FormEvent) => {
const value = e.target as HTMLInputElement
setFoodTemplateDetails((prevDetails) => {
  return {
    ...prevDetails,
    [value.name]:
      (
        value.name === 'menu' ||
        value.name === 'description' ||
        value.name === 'mealTime' ||
        value.name === 'subscriptionDuration'
      ) && value.value.toString(),
    extraServings:
      value.name === 'extraServings' && prevDetails.extraServings,
    isActive:
      value.name === 'isActive' && prevDetails.isActive,
  }
})
}

and below is where I am calling the select input

<Flex justify={'space-between'} gap='20px' mt='15px'>
        <VStack align={'start'} gap='10px' w='100%'>
          <label htmlFor="">Extra servings</label>
          <Select
            name='extraServings'
            onChange={handleInputChange}
          // value={foodTemplateDetails.extraServings ? 'true' : 'false'}
          >
            <option value='true'>True</option>
            <option value='false'>False</option>
          </Select>
        </VStack>
        <VStack align={'start'} gap='10px' w='100%'>
          <label htmlFor="">Active</label>
          <Select
            name='isActive'
            onChange={handleInputChange}
          // value={foodTemplateDetails.isActive ? 'true' : 'false'}
          >
            <option value={'true'}>True</option>
            <option value='false'>False</option>
          </Select>
        </VStack>
      </Flex>

so there are 2 select inputs with values of true and false for them both, I gave these inputs different names but when I check their values in the console, I get a wrong value for what I am choosing.

this is a screenshot of the screen (you can see how I have chosen false | true on the screen but the value is showing as false| false)

I'd really appreciate any help, thank you!

Answer 1

return {
        ...prevDetails,
        [name]:
          (name === 'menu' ||
            name === 'description' ||
            name === 'mealTime' ||
            name === 'subscriptionDuration') && value.toString(),
        extraServings: name === 'extraServings' ? value === 'true' : prevDetails.extraServings,
        isActive: name === 'isActive' ? value === 'true' : prevDetails.isActive,
      };

In this version, I use the type property of the input to determine whether it is a select input or not. For the selected input, we directly set the value. For other input types, I adjusted the condition to actually update extraServings and isActive based on the selected value.