how to change a text input's value in react js for array?

Question

I want to change the value in the input box in my react js application. I tried using this solution that uses spread.. but the value still won't change. what am I doing wrong? any help is appreciated..

here's my code:

import { useState, useEffect } from "react";

export default function App() {
  const [stuffs, setStuffs] = useState([]);

  useEffect(() => {
    getStuffs();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const getStuffs = () => {
    let data = [
      {
        id: 1,
        name: "candy",
        qty: 20
      },
      {
        id: 2,
        name: "book",
        qty: 15
      }
    ];
    setStuffs(data);
  };

  const handleChange = (e) => {
    console.log("stuffs1", stuffs);
    setStuffs(
      stuffs.map((item) =>
        item.id === e.target.id ? { ...item, qty: e.target.qty } : item
      )
    );
    console.log("stuffs2", stuffs);
  };

  return (
    <div className="App">
      {stuffs.length > 0 ? (
        stuffs.map((item, index) => (
          <div key={item.id}>
            <label>{item.name}</label>
            <input
              type="text"
              id={item.id}
              name="qty"
              value={item.qty}
              onChange={handleChange}
            />
          </div>
        ))
      ) : (
        <span>No data</span>
      )}
    </div>
  );
}

and here's the code sandbox

Harkunwar · Accepted Answer · 2022-05-25 18:52:31Z

1

Since event.target.id defaults to a string, you'll need to convert it to number. You can add a + in the beginning to easily do that

Your code should look like

stuffs.map((item) =>
      item.id === +e.target.id ? { ...item, qty: e.target.qty } : item
    )

Another issue in your code is that you're using e.target.qty which is undefined. It should be +e.target.value instead. (Added + for the same reasons to convert it to a number)

Final code should look like

stuffs.map((item) =>
      item.id === +e.target.id ? { ...item, qty: +e.target.value } : item
    )

answered May 25, 2022 at 18:52

Harkunwar

7135 silver badges10 bronze badges

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

1 Comment

dapidmini Over a year ago

just a little note for a fellow newbie like me: if there's more than 1 process that needs to be run when item.id matches the e.target.id, we can use curly brackets in the map callback function, we just have to return something (in this case, the item variable). so it'll look like this:

stuffs.map((item) => { console.log('blah'); if (item.id === +e.target.id) { item = {...item, qty: +e.target.value}; return item;} });

CD.. · Accepted Answer · 2022-05-25 18:34:34Z

1

e.target.id is a string, while item.id is a number, so try:

setStuffs(
      stuffs.map((item) =>
        item.id === Number(e.target.id) ? { ...item, qty: e.target.qty } : item
      )
    );

answered May 25, 2022 at 18:34

CD..

74.4k25 gold badges160 silver badges170 bronze badges

Comments

Bas · Accepted Answer · 2022-05-25 18:37:31Z

1

event.target.id evaluates to a string and item.id is a number. Thus, item.id === event.target.id would always evaluate to false.

use parseInt() instead

item.id === parseInt(e.target.id, 10)

answered May 25, 2022 at 18:37

Bas

1,4333 gold badges10 silver badges23 bronze badges

Collectives™ on Stack Overflow

how to change a text input's value in react js for array?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related