React handle multi input value

Question

I have a form and some inputs have same names. How can I iterate in array that input values? I am using hooks.

State

const [refs, setRefs] = useState({referances:[]})

Handle

I am not sure how can I handle here that values.

 const handleInput = (event) => {
    setRefs({
      ...refs.referances,
        [event.target.name]:event.target.value
    })
  }

Inputs

<div className="container">
    <div className="col-md-6">
        <h5>First Referance</h5>
        <input type="text" name='refName' value={refs.referances.refName} onChange={handleInput}>
        <input type="text" name='refCompany' value={refs.referances.refCompany} onChange={handleInput}>
        <input type="text" name='refPhone' value={refs.referances.refPhone} onChange={handleInput}>
    </div>
    <div className="col-md-6">
        <h5>Second Referance</h5>
        <input type="text" name='refName' value={refs.referances.refName} onChange={handleInput}>
        <input type="text" name='refCompany' value={refs.referances.refCompany} onChange={handleInput}>
        <input type="text" name='refPhone' value={refs.referances.refPhone} onChange={handleInput}>
    </div>
</div>

This is what I need to output;

referances:
[
{refName:'Mike', refCompany:'Nike', refPhone:'77188738'},
{refName:'Angle', refCompany:'Ranger', refPhone:'1245738'}
]

Is the number of references always 2?

brein
– brein

2019-07-04 23:46:39 +00:00
Commented Jul 4, 2019 at 23:46 — brein
– brein, Commented Jul 4, 2019 at 23:46
Yeah, so it's not dynamic. Just 2.

Noob Doez
– Noob Doez

2019-07-04 23:48:26 +00:00
Commented Jul 4, 2019 at 23:48 — Noob Doez
– Noob Doez, Commented Jul 4, 2019 at 23:48

brein · Accepted Answer · 2019-07-05 00:21:52Z

1

I would go with this solution:

Add an extension to each input to identify which reference they are referring

   <div className="container">
      <div className="col-md-6">
        <h5>First Referance</h5>
        <input
          type="text"
          name="refName-0"
          value={refs.referances[0].refName || ""}
          onChange={handleInput}
        />
        <input
          type="text"
          name="refCompany-0"
          value={refs.referances[0].refCompany || ""}
          onChange={handleInput}
        />
        <input
          type="text"
          name="refPhone-0"
          value={refs.referances[0].refPhone || ""}
          onChange={handleInput}
        />
      </div>
      <div className="col-md-6">
        <h5>Second Referance</h5>
        <input
          type="text"
          name="refName-1"
          value={refs.referances[1].refName || ""}
          onChange={handleInput}
        />
        <input
          type="text"
          name="refCompany-1"
          value={refs.referances[1].refCompany || ""}
          onChange={handleInput}
        />
        <input
          type="text"
          name="refPhone-1"
          value={refs.referances[1].refPhone || ""}
          onChange={handleInput}
        />
      </div>
    </div>

and when you process the input figure out which one you are editing like this:

  const handleInput = event => {
    const [refName, refIndex] = event.target.name.split("-");

    let newRefs = [...refs.referances];
    newRefs[refIndex][refName] = event.target.value;

    setRefs({ referances: newRefs });
  };

and don't forget to set up empty refs or it will throw errors all around the place:

const [refs, setRefs] = useState({ referances: [{}, {}] });

here is a working example:

https://codesandbox.io/s/pedantic-moser-k2yi8

edited Jul 5, 2019 at 0:21

answered Jul 5, 2019 at 0:11

brein

1,4299 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noob Doez Over a year ago

Thank you very much for spending time Renato! It's working.

brein Over a year ago

happy to share some know how :)

Collectives™ on Stack Overflow

React handle multi input value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related