How do I add user input inside an object array with useState?

Question

I am new to React and I am currently building a recipe website to add/edit/delete recipes inside a database (Django). My issue is I have my backend set up and the proper JSON format, but I do not know how to properly manipulate the data on my front end to eventually send to my back end. Code and problem is as follows.

JSON

{
        "id": 1,
        "name": "Pizza",
        "description": "Good Pizza",
        "ingredients": [
            {
                "ingredients": "cheese"
            }
        ]
    }

React


const Home = () => {
  const [item, setItem] = useState({
    name: "",
    description: "",
    ingredients: [{
        ingredients: ''
    }],
  });

  const handleInputChange = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    if (name === "ingredients") {
      setItem({ ingredients: [{ [name]: value }] });
    } else {
      setItem({ [name]: value });
    }
  };

  console.log(item);  // using to keep track of what has changed

  return (
    <div>
      <form>
        <input
          name="name"
          type="text"
          value={item.name}
          onChange={handleInputChange}
        />
        <input
          name="ingredients"
          type="text"
          value={item.ingredients[0].ingredients} // im like 200% sure this is wrong...
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
};

export default Home;

Submitting user input to name, or description is working fine, but I am running into all sorts of issues as soon as I try to add ingredients, and I cannot seem to find the right way forward. I understand my code is minimal on the react side, but I wanted to get the ingredients down before I proceeded to adding anything else (adding extra inputs, styling, REST operations). Thank you!

When calling setItem, you should probably use the spread operator ..., in your current code, you are setting the item to a new object entirely. For example, in setItem({[name]:value}), you are setting the state to become an object with one key only. To keep the object with the same keys and only modify the one you want, instead use setItem({...item, [name]:value}) — sgck
– sgck, Commented Jan 1, 2022 at 16:32
Wow, this information is what I’ve needed all along… thank you! — DolFin
– DolFin, Commented Jan 1, 2022 at 17:01

k-wasilewski · Accepted Answer · 2022-01-01 16:29:13Z

2

So I would remove this ingredients duplicate, so taht it is a simple string array:

    {
        "id": 1,
        "name": "Pizza",
        "description": "Good Pizza",
        "ingredients": ["cheese"]
    }

Then your modification of the state value would be as simple as adding an object to an array:

const addIngredient = (value) => {
    setItem(prevItem => {
        return (
            ...prevItem,
            ingredients: [...prevItem.ingredients, value],
        );
    });
}

answered Jan 1, 2022 at 16:29

k-wasilewski

4,6914 gold badges18 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

How do I add user input inside an object array with useState?

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