CODEWITHSUNDEEP
javascriptarraysreactjs
Noob Doez
Noob Doez

Reputation: 59

React handle multi input value

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'}
]

Upvotes: 3

Views: 110

Answers (1)

brein
brein

Reputation: 1419

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

Upvotes: 1

Related Questions