ES6/React adding object to array

Question

Somewhere in the code lies a flaw if someone could spot it it I would appreciate help thank you.

Step 1. react form to add a record to the state containing two variables [email & name]

    export const AddForm = (props) => {

         const [ name, setName ] = useState('')
         const [ email, setEmail ] = useState('');

         return (
              <div>
                    Name:
                   <input type="text" 
                           id="name" 
                           onChange={ (event)=> { setName(event.target.value) }} /><br />
                   Email:
                   <input type="email" 
                           id="email" 
                           onChange={ (event)=> { setEmail(event.target.value) }}/><br />
                   <button type="button" 
                           onClick={ ()=> { props.doAdd(name,email) } } >Add</button>
              </div>
         )

    }

Step 2. The execution of the doAdd() function inside the main app.js

  const doAdd = (name,email) => {
    var newData = '{"name":'+name+',"email":'+email+'}';
    setAllVals([...allVals,newData]);

  }

after entering values my array of objects does not perform properly. for example allVals[0].name = blank (it should be name1)

here is console.log

`var newData = '{"name":'+name+',"email":'+email+'}';` isnt adding a new object. Its a string, so `allVals` will not have any properties on it. — Brian Thompson, Jan 24 '20 at 16:16
Even if it was an object, did you not mean `allVals[0].name`? — evolutionxbox, Jan 24 '20 at 16:16
As Brian said. `newData` is a string, hence the double quotes around the entries in your array. — Andreas, Jan 24 '20 at 16:17
Try `var newData = {name,email}`. This will give it property names of your variables and then assign them the values — Brian Thompson, Jan 24 '20 at 16:18
Does this answer your question? [Javascript object literal: what exactly is {a, b, c}?](https://stackoverflow.com/questions/34414766/javascript-object-literal-what-exactly-is-a-b-c) — Emile Bergeron, Jan 24 '20 at 16:27
@EmileBergeron it does thank you - I had my data types mixed up. — Nelles, Jan 24 '20 at 16:30

akhtarvahid · Accepted Answer · 2020-01-25T05:51:56.347

-1

Use this

const doAdd = (n,e) => {
    var newData = {name:n,email:e};
    setAllVals([...allVals,newData]);
  }

pass n to name-> name:n and e to email-> email:e. here your name and email is key of object and n,e are values.

It's similar to

var objExample = {
    key1: value1,
    key2: value2
};

you can check for better understanding Objects

edited Jan 25 '20 at 05:51

answered Jan 24 '20 at 16:20

akhtarvahid

6,733
2
14
21

@Nelles your welcome... if answer is helpful for you please accept/vote for this. – akhtarvahid Jan 24 '20 at 16:23
3

@Nelles Because the fact that `newData` is a string and not an object should have been easy to find with some basic debugging. – Andreas Jan 24 '20 at 16:31
@Andreas truthfully you are correct - it was not throwing an error and I was trapped on it for a long time. I apologise. – Nelles Jan 24 '20 at 16:35
3

This isn't a very good answer... It gives no explanation as to why the error happens, or what your code does to address it. And it unnecessarily changes the parameter names of the OP's function to be completely meaningless single letters. – Brian Thompson Jan 24 '20 at 16:44

ES6/React adding object to array

1 Answers1