Can't figure out a way to add two values from a select element in react-CodePudding

Scenario: I have a react component that allows users to select through different shipping rates. Once a user selects one I want the onChange to get the ID and the amount and I can only figure out how to get just the ID. The select element iterates through an array of rates that is structured like this:

rates = [ {id: 'r8f8hd8', amount: 45}, ...]

Here is the select element:

<select onChange={(e) => console.log(e.target.value)} className='w-8/12 h-14 rounded p-2'>
     <option disabled selected hidden>
       Pick a shipping rate
     </option>
   {rates.map((rate, index) => (
     <option value={{ id: rate.rateId, amount: rate.amount }} key={index}>
       {rate.service} {''}(${rate.amount})
     </option>
   ))}
</select>

I tried setting the option value to an object with the rateId and amount but it just gives me a blank [Object object]

CodePudding user response：

This should fix the issue. A word of advice I wouldn't set the key to just the index. Instead you should use the id that you assigned to the object.

The issue was you we're storing an object as the value. This lead to an issue because value automatically stores a string so your object is converted into a string hence [Object Object]. Mapping already sets its own pre defined object {value:someVal,key:someID}.

Taking your current case into account I believe this is a cleaner way to achieve what you wanted. I've added working code below. Also the extra item in rates was just for testing.

Feel free to comment any questions you have and i'll do my best to answer them.

  let rates = [ {id: 'r8f8hd8', amount: 45},{id: 'r8f8hd', amount: 450}]

  return (
    <select onChange={(e) => console.log(e.target.value)} className='w-8/12 h-14 rounded p-2'>
        <option disabled selected hidden>
          Pick a shipping rate
        </option>
        
      {rates.map((rate) => (
        <option value={rate.amount } key={rate.id}>
          {rate.service} {''}(${rate.amount})
        </option>
      ))}
    </select>
  )

Just incase your just dead set on storing multiple values here's a solution to that as well but I would go as far as saying this is just bad code but it does what you wanted. Since map has its own object as I mentioned we can mutate it and give it more characteristics hence id and trueVal that I added. We can use the index and store that as our value and instead of accessing our data through e.target.value we can instead utilize the e.target.options and simply cross reference the index value we stored to make sure we are always accessing the correct position in the array. However please take note of the 1 this is to take the first position into account which is held by the, "Pick a shipping rate".

      let rates = [ {id: 'r8f8hd8', amount: 45},{id: 'r8f8hd', amount: 450}]

  return (
    <select onChange={(e) => console.log(e.target.options[e.target.value])} className='w-8/12 h-14 rounded p-2'>
        <option disabled selected hidden>
          Pick a shipping rate
        </option>

      {rates.map((rate, index) => (
        <option value={index 1} trueVal={rate.amount} id={rate.id} key={index}>
          {rate.service} {''}(${rate.amount})
        </option>
      ))}
    </select>
  )
}

CodePudding user response：

In html value prop is a string, so value={{ id: rate.rateId, amount: rate.amount }} is converted to string, that's why you are getting [Object object] .

Solution : change your component like this :

.....
const [option, setOption] = React.useState({});

const handlechange = (e)=>{
  for (let i = 0; i < rates.length; i  ) {
      if (e.target.value === rates[i].id) {
        setOption({ id: rates[i].id, amount: rates[i].amount });
      }
    }
  }
return (
    <select onChange={handlechange} className="w-8/12 h-14 rounded p-2">
      <option disabled selected hidden>
        Pick a shipping rate
      </option>
      {rates.map((rate, index) => (
        <option value={rate.id} key={index}>
          {rate.service} {""}(${rate.amount})
        </option>
      ))}
    </select>
  );

Now your id and amount of selected option will be stored in option state

this is a demo in codesandbox