React: Receive object data from Form Input and add list in an array

Question

I store the input data in an object and send it to parent comp App.js, I want to create a list every time the user submits the form containing that object data in an array and the list keeps adding data.

AddUserForm.js

export default function AddUserForm({addedUser}) {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [phone, setPhone] = useState('');
    const [age, setAge] = useState('');
    const [image, setImage] = useState('');
    
    //On submit form handler
    const addUserHandler = (e) => {
        e.preventDefault();

        const userData = {
            userName: name,
            userEmail: email,
            userAge: age,
            userPhone: phone,
            userImage: image
        }
        // Sending data back to the parent App.js
        addedUser(userData);
    }
}

Receiving data in App.js and now I want to send the data in an array which keeps on adding the list after every form submit

App.js

function App() {

  const [userData, setUserData] = useState([]);

    return <main>
    <div className="form__wrap">      
      <AddUserForm addedUser={setUserData}/>
    </div>
    <div className="user__wrap">
      <Users newUser={userData}/>
    </div>
  </main>;
}

How can I use it in an array which will add on the list?

Users.js (this sibling comp of AddUserForm)

export default function Users({ newUser }) {
    return (
        <div className="usercard__wrap">
            {newUser.map((el, i) => {
                return (
                    <UserCard
                        key={i}
                        name={el.name}
                        email={el.email}
                        age={el.age}
                        phone={el.phone}
                        image={el.image}
                    />
                );
            })}
        </div>
    );
}

Colin Hale · Accepted Answer · 2022-09-14 17:31:33Z

You need to make a funciton in the parent that sets the new user array. You can do this by setUsers([...users , newUser]) that will add on to the array of users. CodeSandBox

        export default function App() {
      const [users, setUsers] = useState([]);
    
      const addUser = (user) => {
        setUsers([...users, user]);
      };
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          {users.map((user) => (
            <p>{`${user.userName} | ${user.userAge}`}</p>
          ))}
    
          <AddUserForm addUser={addUser} />
          <button onClick={() => setUsers([])}>Clear</button>
        </div>
      );
    }

export default function AddUserForm({ addUser }) {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  //On submit form handler
  const addUserHandler = (e) => {
    e.preventDefault();

    const userData = {
      userName: name,
      userAge: age
    };
    // Sending data back to the parent App.js
    addUser(userData);
    setName("");
    setAge("");
  };
  return (
    <>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="name"
      />
      <input
        value={age}
        onChange={(e) => setAge(e.target.value)}
        placeholder="age"
      />
      <button onClick={addUserHandler}>Add User</button>
    </>
  );
}

Collectives™ on Stack Overflow

React: Receive object data from Form Input and add list in an array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related