CODEWITHSUNDEEP
javascriptreactjs
Mehdi Faraji
Mehdi Faraji

Reputation: 3854

How can I update the value of an object while mapping through it's array?

I'm mapping through an array and I'm using an input's value to display the objects text like this : 

        {items.map((item) => {
                return (
                    <div key={item.text}>
                        <input value={item.text} type="text" />
                    </div>
                );
            })}

Now I want to change that specific object text when user clicks on the input so I make an onChange function for the input : 

<input onChange={(e) => set(e.target.value)} value={item.text} type="text" />

And then I get the value in the set function and I want to change the object's text into the new value which user's typing in :

    const set = (value) => {
        items.map((item) => {
            if (item.text === value) {
                item.text === value;
            }
            return null;
        });
        console.log(value);
    };

But it thows an error :

 Expected an assignment or function call and instead saw an expression  no-unused-expressions

Also I guess it wont update that objects value .

So how properly I can update an object's text in the input field while mapping through the whole array ?

Upvotes: 0

Views: 2563

Answers (2)

sammyt
sammyt

Reputation: 331

Form inputs in React are known as controlled components, and there are some great examples in the docs that should help shed some light on issues like this one. There are also a ton of form libraries out there that take a lot of the pain out of managing form state.

Another important detail here is that array.map returns a new array, rather than modifying an array in place. So, your set function is going to need to return a new array with the updates you want, and ideally you’ll be using React’s built in tools (e.g. useState or setState) to update your list of items. Here’s the smallest example I could come up with to try and illustrate that. I’m making some assumptions here that your items array is maintained in React state somewhere, and that your items array is a simple array of objects with maybe just an id and text field.

import React, { useState } from "react";

function App() {
  const [items, setItems] = useState([
    { id: 1, name: "first", text: "first" },
    { id: 2, name: "second", text: "second" },
    { id: 3, name: "third", text: "third" }
  ]);

  const handleChange = (evt, id) => {
    const { name, value } = evt.target;

    const newItems = items.map(item => {
      if (item.id !== id) {
        return { ...item };
      }

      return { id, name, text: value };
    });

    setItems(newItems);
  };

  const submit = () => {
    alert(JSON.stringify(items));
  };

  return (
    <div className="App">
      <h1>Example</h1>
      <form>
        {items.map(item => (
          <div key={item.id}>
            <input
              name={item.name}
              value={item.text}
              onChange={evt => handleChange(evt, item.id)}
            />
          </div>
        ))}
        <button onClick={submit}>Submit</button>
      </form>
    </div>
  );
}

export { App as default };

Upvotes: 0

blazehub
blazehub

Reputation: 1960

In set method, you are use comparison instead of assignment

  item.text === value;

This should update your item object

  item.text = value;

Upvotes: 2

Related Questions