Adding Data into an Array as a state object in reactjs

Question

Actually, I am stuck at a point, Please have a look the code once. I want to push the user input into my array. Can anyone explain why it's throwing error.

import React, { useState } from 'react';

function Cart() {
  const [item, setItem] = useState({ cart: ['Corn', 'Potato'] });

  const saveInput = (e) => {
    setItem({ input: e.target.value });
  };
  const addNewItem = () => {
    const { cart, input } = item;
    cart.push(input);
    return setItem({ cart: cart });
  };
  return (
    <div>
      <input type="text" onChange={saveInput} />
      <button onClick={addNewItem}>Add Item</button>
      <ol>
        {item.cart.map((subItems, sIndex) => {
          return <li key={sIndex}> {subItems}</li>;
        })}
      </ol>
    </div>
  );
}

export default Cart;

Use separate state for separate concerns. In your case you should have a state for the text input and one for items in your cart — Dominik
– Dominik, Commented Aug 25, 2021 at 8:17

Ryan Le · Accepted Answer · 2021-08-25 08:25:26Z

2

Just like Dominik said, it would be much more efficient to have separate of your state.

If you want to make your existing code works:

Change

setItem({ input: e.target.value });

TO:

setItem({ ...item, input: e.target.value });

You forgot to spread your previous state before changing new ones.

answered Aug 25, 2021 at 8:25

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

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

Comments

Shyam · Accepted Answer · 2021-08-25 08:35:49Z

import React, { useState } from "react";

function Cart() {
  const [item, setItem] = useState({ cart: ["Corn", "Potato"] });
  // have a new state to hold the input value
  const [inputValue, setInputValue] = useState("");

  const saveInput = (e) => {
    setInputValue(e.target.value);
  };

  const addNewItem = () => {
    // spread the exisiting cardlist and append the newly added input value
    setItem((existingCartList) => ({
      cart: [...existingCartList.cart, inputValue]
    }));
    // clear the input once it is added to card list
    // so we can prevent the user from manually clearing it
    setInputValue("");
  };

  return (
    <div>
      
      {/* need to pass the inputValue state to the value attribute 
         which makes the input a controlled component */}

      <input type="text" value={inputValue} onChange={saveInput} />
      <button onClick={addNewItem}>Add Item</button>
      <ol>
        {item.cart.map((subItems, sIndex) => {
          return <li key={sIndex}> {subItems}</li>;
        })}
      </ol>
    </div>
  );
}

export default Cart;

Working Sandbox

Reference

Controlled Components

Majid M. · Accepted Answer · 2021-08-25 08:25:34Z

You can use separate states. One for handle input and another for handle list:

import React, { useState } from "react";

function Cart() {
  const [item, setItem] = useState(["Corn", "Potato"]);
  const [input, setInput] = useState(""); 

  const saveInput = (e) => {
    setInput(e.target.value);
  };
  const addNewItem = () => {
    const copyCart = [...item];
    copyCart.push(input);
    setItem(copyCart);
    setInput("");
  };
  return (
    <div>
      <input value={input} type="text" onChange={saveInput} />
      <button onClick={addNewItem}>Add Item</button>
      <ol>
        {item.map((subItems, sIndex) => {
          return <li key={sIndex}> {subItems}</li>;
        })}
      </ol>
    </div>
  );
}

export default function App() {
  return <Cart />;
}

Here's the full example:

Collectives™ on Stack Overflow

Adding Data into an Array as a state object in reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related