How to add an array to an empty array in React using hooks

Question

I'm trying to create a random name generator where a user would input a bunch of names in a text box, and then it would output a single name from the array.

So far I have the following:

function App() {
  const [firstNames, setFirstNames] = useState(['']);
  
  const submitResults = (e) => {
   e.preventDefault();
   console.log(firstNames.length);
  };
  
  return (
    <main>
      <form onSubmit={submitResults}>
        <div className="container">
          <NameField
            htmlFor="first-selection"
            id="first-selection"
            title="Selection 1"
            value={firstNames}
            onChange={(e) => setFirstNames(e.target.value)}
          />
        </div>
     </form>
    </main> 
   );
}

But when I console.log the firstNames.length, I'm getting the character number instead. For example, if I submit [hello, there], I'll get 12 as the firstNames.length instead of 2. I tried playing around with the onChange, but I'm still not sure how to update the firstNames state so it adds the array properly.

Because e.target.value is a string. You have to convert that to a JSON array. Try using JSON.parse(e.target.value) — Samathingamajig
– Samathingamajig, Commented Nov 14, 2020 at 5:21
If I add JSON.parse and start typing the letter "h" (for example), I'll get an error that says "Unexpected token h at JSON)..." — imnewhere
– imnewhere, Commented Nov 14, 2020 at 5:31
Try this onChange={(e) => setFirstNames([...firstNames,e.target.value])} . — Siddhant Varma
– Siddhant Varma, Commented Nov 14, 2020 at 5:33
That's close, but if I type it'll continuously add whatever I typed before for example, if I type "hello" the array would be ["h", "he", "hel", "hell", "hello"] — imnewhere
– imnewhere, Commented Nov 14, 2020 at 5:37

Drew Reese · Accepted Answer · 2020-11-14 05:46:26Z

1

You've entered a string of comma separated names, so when you want to process this as an array you need to convert the string into an array of strings.

Use String.prototype.split to split the firstNames state by "," to get an array.

firstNames.split(',').length

function App() {
  const [firstNames, setFirstNames] = useState("");

  const submitResults = (e) => {
    e.preventDefault();
    console.log(firstNames.split(",").length);
  };

  return (
    <main>
      <form onSubmit={submitResults}>
        <div className="container">
          <input
            htmlFor="first-selection"
            id="first-selection"
            title="Selection 1"
            value={firstNames}
            onChange={(e) => setFirstNames(e.target.value)}
          />
          <button type="submit">Check Names</button>
        </div>
      </form>
    </main>
  );
}

answered Nov 14, 2020 at 5:46

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

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

1 Comment

Drew Reese Over a year ago

@imnewhere Don't forget to use any array filtering and string trimming functions in case the user enters something like " name one , nameTwo, , , three,, " so you can junk the empty strings. Basically just sanitize the input before you consume it elsewhere.

Collectives™ on Stack Overflow

How to add an array to an empty array in React using hooks

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related