How can I create an object with input values and push it to array?

Question

Let's say I have the following array in React:

const employees=[
    {
      id:1,
      firstName:'John',
      lastName:'Martinez'
    },
    {
        id:2,
        firstName:'Julio',
        lastName:'Mariella'
    }
]

I want to generate an array from user's input. For example user types their first name and last name in certain input fields and then these values are inserted into array and pushed to the employees object.

I tried to insert array with:

employees.push(employee);

but that's not correct.

Answer 1

If you are using react then you should use state hook like this:

replace the initial array value with your initial array

const [employees, setEmployees] = useState([]);

add the new employee

setEmployees(prevEmployees => ([...prevEmployees, ...newEmployee]));

Answer 2

This is how you can do it, I have added an input for you to enter info and add to array. This is not react, just an example of the code you provided to work, the way you could try in react is underneath code (not tested)

const employees=[
        {
          id:1,
          firstName:'John',
          lastName:'Martinez'
        },
        {
            id:2,
            firstName:'Julio',
            lastName:'Mariella'
        }
    ]
    
function add() {    
var new_name = document.getElementById('firstname').value;
var new_lastname = document.getElementById('lastname').value;   

if (new_name === '') { alert("Fill in Name"); return; }
if (new_lastname === '') { alert("Fill in Last Name"); return; }


var last = employees.slice(-1)[0]       // Get last array //
var newid = last.id;                    // Gets last ID in array //


newid++;                                // Adds 1 to the new ID //

const newID = {                         // Make new Data //
    id:newid, 
    firstname:new_name, 
    lastname:new_lastname
    };

employees.push(newID);                  // Add to array //
console.log(employees);
alert(new_name+' '+new_lastname+" added");
    }

First Name : <input type='text' name="firstname" id='firstname' /><BR>
Last Name : <input type='text' name="lastname" id='lastname' /><BR>
<button onclick="add()">ADD</button>

This is sort of how you would do it in react, I have not added the function for input or id increment but should work.

const [ employees, setEmployees ] = useState(
        [
        {
          id:1,
          firstName:'John',
          lastName:'Martinez'
        },
        {
            id:2,
            firstName:'Julio',
            lastName:'Mariella'
        }
    ]
)


const [ newEmployee, setNewEmployee ] = useState(
        [
        {
          id:3,
          firstName:'David',
          lastName:'Jones'
        }
    ]
)


// In a function //

    setEmployees(employees => [...employees, newEmployee]);

//