i want to store object in an array each time the submit button clicks but it stores single object in an array after every submit button

Question

i want store object of users in an array after every submit button clicks but it just stores single object in an array and returns it.

import React from 'react';

import {useHistory} from 'react-router-dom'

import {useEffect} from 'react';

const Register = () =>{ //register function

const classes = useStyle();
const history = useHistory();
const [name, setName] = React.useState('');
const [password, setPassword] = React.useState('');
const arr = []


const submit = () =>{ //submit button

    localStorage.setItem('name',name);
    localStorage.setItem('password', password);
    const obj = {};
    obj.id = Math.random();
    obj.name = localStorage.getItem('name');
    obj.password = localStorage.getItem('password');
    arr.push(obj)

    history.push('/')
}
console.log(arr);





return(
    <div>
        <div className = {classes.formWrapper}>
            <Paper elevation={3} className = {classes.paper} >
            <Typography variant="h5" style = {{ textAlign : 'center'}}>Register</Typography>
            <form noValidate autoComplete="off">
                <TextField id="fname" className={classes.textfield} value = {fname} name = "name" label="Fist name" onChange = {e=>setFname(e.target.value)}/>
                <TextField id="lname" className={classes.textfield} value = {lname} name = "name" label="Fist name" onChange = {e=>setLname(e.target.value)}/>
                <br />
                <TextField id="username" className={classes.textfield} style={{width : '95%'}} value = {name} name = "username"  label="Username" onChange = {e=>setName(e.target.value)} />
                <br />
                <TextField id="email" className={classes.textfield} style={{width : '95%'}} value = {email} name = "email"  label="Email" onChange = {e=>setEmail(e.target.value)} />
                <br />
                <TextField id="password" className={classes.textfield} style={{width : '95%'}} value = {password} name = "password"  label="Password" onChange = {e=>setPassword(e.target.value)} />
                <br />
                <br />
                <Button variant="contained" color="secondary" style = {{width : '100%'}} onClick = {submit} >Register </Button>
            </form>
            </Paper>
        </div>
    </div>

)

}

export default Register;

(1) arr will be reset every render cycle, so saving anything into it is rather moot, (2) after history.push('/') this component is likely unmounted, so any component state will likely be garbage collected, (3) when the form is submitted it's likely reloading the app/page since you're not preventing the default form action from occurring. What is the actual desired behavior of your code? — Drew Reese
i want to store it an array after each time the submit button is clicked. i'm practicing react. — Mohammad Faateh

Drew Reese Drew Reese · Accepted Answer · 2021-06-29T06:45:04

Move the arr into local component state.

const [arr, setArr] = React.useState([]);

Update the arr state in the submit handler and reset the form. Use a functional state update and shallow copy the previous arr state into a new array and append the new object.

const submit = (event) => {
  event.preventDefault(); // <-- prevent form submit action

  localStorage.setItem('name', name);
  localStorage.setItem('password', password);
  const obj = {};
  obj.id = Math.random();
  obj.name = localStorage.getItem('name');
  obj.password = localStorage.getItem('password');

  setArr(arr => [...arr, obj]); // <-- update arr state

  setName('');
  setPassword('');
}

i want to store object in an array each time the submit button clicks but it stores single object in an array after every submit button

1 Answers