Every change of the input is stored separately as data (ex : "t", "te", "tes", "test" instead of just having "test")

Question

The fact is I'm using an object to store all the data my form collects. In this object, I have an array, and the only solution I've found to update it is to create a function that adds every input into an array and then sets : this.setState({ 'invites': array }); But, the problem is that every change is added to the array and stored. How can I fix this ?

<input
    className="form-input"
    type="email"
    placeholder="nom@exemple.com"
    name="invites"
    onChange={e => addToArray(e, "invites")}
    required
/>

function addToArray(e, name) {
     emailList.push(e.target.value);
     props.handleChangeArray(name, emailList);
}

handleChangeArray = (name, array) => {
    this.setState({ [name]: array });
};

That's how input's onChange works, unless you want to use timebound after which `setState` is fired if not new change occured. — Andrzej Ziółek, Sep 01 '19 at 16:13
@AndrzejZiółek I want to find a solution that allows me to continue using ```onChange``` — M Millo, Sep 01 '19 at 16:17
@SungM.Kim Is there a way to directly modify the array in the function ? — M Millo, Sep 01 '19 at 16:18
So maybe use button that forces user to click if he/she wants to save the email? — Andrzej Ziółek, Sep 01 '19 at 16:18

Matt Oestreich · Accepted Answer · 2019-09-01T19:51:43.057

EDIT:

In the StackSnippet below, I have updated your example (OPs example can be found here) showing how you can get values on submit:

const { useState } = React;

const WORD_LIST = ["Foo", "Bar", "Baz", "Rock", "Paper", "Scissors", "Hello", "Goodbye"];

function InviteInput(props) {
  const { value, onChange } = props;
  const handleChange = e => {
    onChange && onChange(e);
  };
  return (
    <li>
      <input
        value={value}
        onChange={handleChange}
        className="form-input"
        type="email"
        placeholder="nom@exemple.com"
        name="invites"
        required
      />
    </li>
  );
}

function AddInviteButton(props) {
  return (
    <button onClick={props.onClick}>
      Ajouter une autre personne // (Add another person)
    </button>
  );
}

function InviteForm({ onSubmit, initialInputCount }) {
  const [nbInvites, setNbInvites] = useState(
    [...Array(initialInputCount).keys()].map(i=>WORD_LIST[i])
  );

  const onAddInviteClick = () => {
    //let id = nbInvites.length + 1;
    setNbInvites([
      ...nbInvites,
      //{
        //id,
        //***********************************************************
        // THIS IS WHERE YOU SET THE DEFAULT VALUE FOR NEW INPUTS
        //***********************************************************
        /*value:*/ WORD_LIST[Math.floor(Math.random() * WORD_LIST.length)]
        //***********************************************************
      //}
    ]);
  };

  const handleChange = (event, index) => {
    let newstate = [...nbInvites];
    newstate[index]/*.value*/ = event.target.value;
    setNbInvites(newstate);
  };

  const handleSubmit = event => {
    onSubmit(event, nbInvites);
  };

  return (
    <div>
      {nbInvites.map((item, index) => {
        return (
          <InviteInput
            key={index}
            value={item}
            onChange={e => handleChange(e, index)}
          />
        );
      })}
      <AddInviteButton onClick={onAddInviteClick} />
      <br />
      <button onClick={handleSubmit}>Soumettre // Submit</button>
    </div>
  );
}

function App() {
  const [formVals, setFormVals] = useState();

  const doSubmit = (event, formValues) => {
    setFormVals(formValues);
  };

  return (
    <div className="page">
      <h2 className="box-title">
        Qui sont les eleves de cette classe ? // (Who are the students in this
        class?)
      </h2>
      <p>
        Vous pourrez toujours en ajouter par la suite // (You can always add
        some later)
      </p>
      <InviteForm onSubmit={doSubmit} initialInputCount={5} />
      {formVals ? <pre>{JSON.stringify(formVals, null, 2)}</pre> : ""}
    </div>
  );
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

ORIGINAL ANSWER:

You'll need to use the value prop and use event.target.value to assign the value of whatever is typed to the input.

Something like this:

function Test() {
  const [inputs, setInputs] = React.useState([{
    id: 1,
    value: "1 initial"
  }, {
    id: 2,
    value: "2 initial"
  }]);
  
  const handleChange = (event, index) => {
    let newstate = [...inputs];
    newstate[index].value = event.target.value;
    setInputs(newstate);
  }
  
  const addInput = () => {
    let id = inputs.length + 1;
    setInputs([...inputs, {
      id,
      value: `${id} initial`
    }])
  }
  
  return(
    <div>
      <button onClick={addInput}>Add Input</button>
      {inputs.map((item, index) => {
        return <div><input type="text" value={inputs[index].value} onChange={e=>handleChange(e,index)} /></div>
      })}
    </div>
  );
}

ReactDOM.render(<Test />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

yes, but the problem is that the user can add as many inputs as he wants (it's invites inputs) — M Millo, Sep 01 '19 at 16:22
@MMillo I have updated my answer to show how you can handle adding inputs dynamically.. — Matt Oestreich, Sep 01 '19 at 16:39
@MMillo is something like that what you were looking for or am I still misunderstanding? — Matt Oestreich, Sep 01 '19 at 16:48
but is there a way to use the existing keys `````` as an index ? — M Millo, Sep 01 '19 at 17:26
I think it would be easier to answer your questions if you built a reproducible example using something like codesandbox.io or codepen.io - it is hard to piece things together using just code samples/pastebin links. Do you think you could create a codesandbox or something? It would just be easier for everyone to understand and help. — Matt Oestreich, Sep 01 '19 at 17:32
the code is very complex, this is only a tiny component among many others, but I'll try to make a very simplified version — M Millo, Sep 01 '19 at 17:36
Awesome! Thank you :) a simplified example would be perfect. — Matt Oestreich, Sep 01 '19 at 17:36
@MMillo I have updated my answer using the code you supplied to show how you can grab all values when the form is submitted. Is this what you are looking for? — Matt Oestreich, Sep 01 '19 at 18:27
yes indeed this is what I'm looking for. Thanks for your help and for your patience (I'm new in React) — M Millo, Sep 01 '19 at 18:48
Awesome! No worries, we were all new at some point. Happy to help! — Matt Oestreich, Sep 01 '19 at 18:55
And last thing, do you know how to iterate in the ```InviteInput``` to gather all the values in a single array ? — M Millo, Sep 01 '19 at 19:41
I have updated my answer to show how you can change the default value of new inputs.. It is inside of `InviteForm` and I have added a comment - you should see it. — Matt Oestreich, Sep 01 '19 at 19:41
The values are already in an array when you hit submit..(its just an array of objects). I will update my answer so that it is just an array of strings. — Matt Oestreich, Sep 01 '19 at 19:42
No worries, I have updated my answer to show how you can use an array of strings, as well as how you can set the default input count. — Matt Oestreich, Sep 01 '19 at 19:50
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198799/discussion-between-m-millo-and-matt-oestreich). — M Millo, Sep 01 '19 at 19:56

score 1 · Answer 2 · answered Sep 01 '19 at 16:19

Instead of onChange, we can use onKeyUp to identify user typing complete event,

We can use onKeyUp event to identify user input event and debounce is to identify when user completes entering all the keywords, we need to use loadash for this functionality

It's just one line with underscore.js debounce function:

onKeyUp={e => _.debounce(addToArray(e, "invites") , 500)}

This basically says doSomething 500 milliseconds after I stop typing.

For more info: http://underscorejs.org/#debounce

Updated the above line

<input
    className="form-input"
    type="email"
    placeholder="nom@exemple.com"
    name="invites"
    onKeyUp={e => _.debounce(addToArray(e, "invites") , 500)}
    required
/>
function addToArray(e, name) {
     emailList.push(e.target.value);
     props.handleChangeArray(name, emailList);
}
handleChangeArray = (name, array) => {
    this.setState({ [name]: array });
};

Source - Run javascript function when user finishes typing instead of on key up?

Every change of the input is stored separately as data (ex : "t", "te", "tes", "test" instead of just having "test")

2 Answers2