Append objects in array using React.js

Question

The objectives of this react app are: firstly, record a group of user inputs, first and last name and address; secondly, create ONE card object for each group of inputs; thirdly, store each card object into a new array called List. After some online consultation, the code has been modified as the following.

const InputField=()=>{
        const [lastName,setLastName]=useState("");
        const [firstName,setFirstName]=useState("");
        const [address,setAddress]=useState("");
        const [card,setCard]=useState({});
        const [list,setList]=useState([]);

        const lastNameUpdate=(e)=>{
          setLastName(e.target.value)
        }

        const firstNameUpdate=(e)=>{
          setFirstName(e.target.value)
        }

        const addressUpdate=(e)=>{
          setAddress(e.target.value)
        }

        const cardUpdate = (e, card) => {
          e.preventDefault();
          setCard({ lastName, firstName, address });
          setList([...list, { ...card }]);
        };

        useEffect(()=>{
          console.log(card)
          console.log(list)
        },[card,list])

  return (
    <div className="user-input-field">
      <form type='submit'onSubmit={cardUpdate}>
        <label>Last Name:</label>
        <input type='text'value={lastName}onChange={lastNameUpdate}></input>
        <label>First Name:</label>
        <input type='text'value={firstName}onChange={firstNameUpdate}></input>
        <label>Address:</label>
        <textarea type='text'value={address}onChange={addressUpdate}></textarea>
        <input type='submit'></input>
      </form>
    </div>
  )
};

The new problem is that when running, user inputs ARE being stored in the Card object, but when being stored in the List array, the objects are empty.

Pseudo code:

a card_x object = {first name_x, last name_x, address_x}
a list array= [card_1, card_2, card_3...]

now the list array is being appended when submit button is clicked, but card_1, card_2, card_3, etc. in the array are just empty object.

Kaca992 · Accepted Answer · 2020-01-27 21:33:15Z

1

I think you should change your cardUpdate to:

    const cardUpdate = (e) => {
      e.preventDefault();
      const newCard = { lastName, firstName, address };
      setCard(newCard);
      setList([...list, { ...newCard }]);
    };

Hope this helps.

answered Jan 27, 2020 at 21:33

Kaca992

2,27513 silver badges15 bronze badges

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

2 Comments

TechSelfLearner Over a year ago

IT WORKKKEED!!!! THANKS. But for my curiosity, why do we have to declare a new variable before setState?

Kaca992 Over a year ago

You don't. Honestly I would drop the const [card,setCard]=useState({}); completly since you are not using it. I declered the newCard variable since i didn't want to duplicate the code :D #cleanCode :P. I am glad I could help. Please mark your answer as resolved as to help others.

Collectives™ on Stack Overflow

Append objects in array using React.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related