How to pass values from dropdown to inputs on select ? ReactJS

Question

I don't know how to pass values from dropdown on select to 4 inputs. My dropdown showing address as it should be but I struggle to pass each value to separate inputs.e.g address_1 should be in one input where is flat number, address_2 where is street etc.

 const [select,setSelect]=useState()

 <select onChange={(e) => setSelect(e.target.value)}>  

 <option>Select Address</option>
                    {getAddressData?.address? (
                      getAddressData?.address?.map((address: any, id) => (
                        <option>{`${address.Address_1},${address.Address_2}, ${address.Town}, ${address.County}`}</option>

                     <input>

                    type={'text'}
                    name={'flatNumber'}
                    placeholder="Flat Number"
                    value={select}

                   </input>

Right now I have whole line of address e.g (30 Ballot Street,Smethick,West Midlands) in the whole one input.

So do you want to show the address in 4 inputs instead of the current one? — dreambold
– dreambold, Commented Dec 14, 2022 at 20:12
@DreamBold yes. 4 inputs showing separately county, address1 ,address2 and town — Vecna1
– Vecna1, Commented Dec 14, 2022 at 21:01

dreambold · Accepted Answer · 2022-12-14 22:05:58Z

Here's the working code. It's live here: https://codesandbox.io/s/competent-firefly-0qdrij?file=/src/App.js

import React, { useState, useEffect } from "react";

function App() {
  const [address, setAddress] = useState({
    Address_1: "",
    Address_2: "",
    Town: "",
    pafCounty: ""
  });

  let getAddressData = {};
  getAddressData.address = [
    {
      Address_1: "Address_1",
      Address_2: "Address_2",
      Town: "Town",
      pafCounty: "pafCounty"
    },
    {
      Address_1: "Address_11",
      Address_2: "Address_22",
      Town: "Town2",
      pafCounty: "pafCounty2"
    }
  ];

  function handleChange(e) {
    setAddress({ ...address, [e.target.name]: e.target.value });
  }

  useEffect(() => {
    console.log(address);
  }, [address]);

  return (
    <>
      <select
        onChange={(e) => {
          setAddress(getAddressData?.address[e.target.value]);
        }}
      >
        <option selected disabled>
          Select Address
        </option>
        {getAddressData?.address?.map((address, index) => (
          <option
            key={index}
            value={index}
          >{`${address.Address_1}, ${address.Address_2}, ${address.Town}, ${address.pafCounty}`}</option>
        ))}
      </select>

      {Object.keys(address).map((key, index) => (
        <input
          type="text"
          name={key}
          placeholder="Flat Number"
          value={address[key]}
          onChange={handleChange}
        />
      ))}
    </>
  );
}

export default App;

ray · Accepted Answer · 2022-12-14 20:13:08Z

0

Instead of setSelect(e.target.value), set it to the original structured address object. You could have the value of the option be the index within the address list, for example, and then setSelect(getAddressData?.address[2]) or whatever.

answered Dec 14, 2022 at 20:13

ray

27.3k5 gold badges31 silver badges30 bronze badges

2 Comments

Vecna1 Over a year ago

Thank you @ray. hmmm I'm not sure If I know what you mean.. Is it any chance you can provide an example? I appreciate it

ray Over a year ago

Look at Dream Bold's answer. Each <option>'s value is just the index of the address within the getAddressData.address array. The select's onChange handler uses that index to set the state to the original address object, instead of trying to stringify it into the option value itself and then parse it back out. <option value={1}>{...}</option> lets you look up address 1 in the array, etc.

Collectives™ on Stack Overflow

How to pass values from dropdown to inputs on select ? ReactJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related