How to edit input value in React Js?

Question

I'm trying to create a component for my app, where when I click on a button input field opens, after I add text I click on that button again and another input opens up, and so on. Then e.target.value of all those inputs should be saved in a different state and displayed in another components. So far I was able to create such input, but I can't figure out how to edit input fields. My code:

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [input, setInput] = useState([{}]);
  const [data, setData] = useState([]);

  function handleChange(i, e) {
    e.preventDefault();

    setInput([
      {
        id: i,
        value: e.target.value
      }
    ]);
  }

  function handleAddInput() {
    const values = [...input];
    values.push({ value: null });
    setInput(values);
  }

  const handleSave = () => {
    let value = input?.map((item) => {
      return item.value;
    });
    if (!value || /^\s*$/.test(value)) {
      return;
    }

    const newData = [...data, ...input];

    setData(newData);

    setInput([])
  };

  return (
      <div className="App">
        <button type="button" className="btn" onClick={() => handleAddInput()}>
          Add  Input fields
        </button>

        {input?.map((input, idx) => {
          return (
            <div key={input.id}>
              <input
                type="text"
                placeholder="Enter text"
                onChange={(e) => handleChange(idx, e)}
                value={input.value}
              />
            </div>
          );
        })}

       
    
<h2>Display Added Fields and Edit</h2>
      {data?.map((item) => {
        return (
          <>
            <input defaultValue={item.value}
            
            
            
            />
          </>
        );
      })}

<button className="btn" onClick={handleSave}>Save</button>

      {data?.map((item) => {
        return (
          <div style={{ display: "flex", flexDorection: "column", marginTop:"20px" }}>
            {item.value}
          </div>
        );
      })}
        </div>
  );
}

codeSandbox

At the moment when I click "Add Input fields" new input pops up, I enter any input text, then I click Add Input fields again and another input opens up, when I click "Save" button, all input values are saved to state (as data) and displayed as inputs, and after I can map through "data" and display received inputs. Like on image I added "first", then "second" and they're getting displayed fine, but I don't know how I could edit them, for example change "first" to "third" and on Save button "third" should be displayed instead of "first". Any help and suggestions are greatly appreciated.

See React onChange event will not fire on custom Input

Shivam Jha
– Shivam Jha

2021-03-23 04:46:43 +00:00
Commented Mar 23, 2021 at 4:46 — Shivam Jha
– Shivam Jha, Commented Mar 23, 2021 at 4:46

Drew Reese · Accepted Answer · 2021-03-23 18:31:40Z

Issue

Using an index as an id isn't a good idea, they aren't unique.
handleChange doesn't persist existing input state.
Other various issues with React keys, and copying state from input to data

Solution

You don't need input objects, you can store the string primitives from the inputs. This means you also don't need the id property, it is trivial to update by index.
Should use functional state updates to update from previous state.
I suggest using a form and onSubmit handler to handle updating the data state array values.

Code:

function App() {
  const [input, setInput] = useState([]);
  const [data, setData] = useState([]);

  function handleChange(i, e) {
    e.preventDefault();

    setInput((values) =>
      values.map((value, index) => (index === i ? e.target.value : value))
    );
  }

  function handleAddInput() {
    setInput((input) => input.concat(""));
  }

  const saveHandler = (e) => {
    e.preventDefault();

    // Map all existing form field values
    setData((data) => data.map((_, i) => e.target[i].value));

    // If there are any input values, add these and clear inputs
    if (input.length) {
      setData((data) => data.concat(input));
      setInput([]);
    }
  };

  return (
    <div className="App">
      <button type="button" className="btn" onClick={handleAddInput}>
        Add Input fields
      </button>

      {input.map((input, idx) => {
        return (
          <div key={idx}>
            <input
              type="text"
              placeholder="Enter text"
              onChange={(e) => handleChange(idx, e)}
              value={input.value}
            />
          </div>
        );
      })}

      <h2>Display Added Fields and Edit</h2>
      <form onSubmit={saveHandler}>
        {data.map((item, i) => {
          return (
            <div key={i}>
              <input id={i} defaultValue={item} />
            </div>
          );
        })}

        <button className="btn" type="submit">
          Save
        </button>
      </form>

      {data.map((item, i) => {
        return (
          <div
            key={i}
            style={{
              display: "flex",
              flexDirection: "column",
              marginTop: "20px"
            }}
          >
            {item}
          </div>
        );
      })}
    </div>
  );
}

Demo

Edit

Edit to generate GUIDs and persist id property through to the data state.

Generate a new GUID when adding a new input field.
Use the id for matching elements for any value updates.
Simply copy the input array to data when saving the input fields.
In example I also render the id at every step so it's clear the data elements are still the same objects.

Code:

function App() {
  const [input, setInput] = useState([]);
  const [data, setData] = useState([]);

  const handleChange = (id) => (e) => {
    e.preventDefault();

    setInput((values) =>
      values.map((el) =>
        el.id === id
          ? {
              ...el,
              value: e.target.value
            }
          : el
      )
    );
  };

  function handleAddInput() {
    setInput((input) =>
      input.concat({
        id: uuidV4(),
        value: ""
      })
    );
  }

  const saveHandler = (e) => {
    e.preventDefault();

    setData((data) =>
      data.map((el) => ({
        ...el,
        value: e.target[el.id].value
      }))
    );

    if (input.length) {
      setData((data) => data.concat(input));
      setInput([]);
    }
  };

  return (
    <div className="App">
      <button type="button" className="btn" onClick={handleAddInput}>
        Add Input fields
      </button>

      {input.map((input) => {
        return (
          <label key={input.id}>
            {input.id}
            <input
              type="text"
              placeholder="Enter text"
              onChange={handleChange(input.id)}
              value={input.value}
            />
          </label>
        );
      })}

      <h2>Display Added Fields and Edit</h2>
      <form onSubmit={saveHandler}>
        {data.map((item) => {
          return (
            <div key={item.id}>
              <label>
                {item.id}
                <input id={item.id} defaultValue={item.value} />
              </label>
            </div>
          );
        })}

        <button className="btn" type="submit">
          Save
        </button>
      </form>

      {data.map((item) => {
        return (
          <div
            key={item.id}
            style={{
              display: "flex",
              flexDirection: "column",
              marginTop: "20px"
            }}
          >
            <div>
              {item.id} - {item.value}
            </div>
          </div>
        );
      })}
    </div>
  );
}

Demo 2

thank you, this is very helpful. Just one question, how do I add id to [data] and make it an object? Like this {id: 1, value: input}
@new_reactjs Please check this updated codesandbox It uses GUIDs for id properties. Instead of using a passed index it matches on id for updating input values.
thank you for updated code, checked and input has an id, but not the data. I'm sorry to keep asking, but I'm not sure how to add id to data, not input.
@new_reactjs Instead of stripping it out you copy the entire contents of input into data. This requires updating the display of the data array elements since they will now be objects as well. I updated my answer with the updated code from the second codesandbox. Please check again, and hopefully this makes it much clearer.

Collectives™ on Stack Overflow

How to edit input value in React Js?

1 Answer 1

Issue

Solution

Demo

Edit

Demo 2

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

Demo

Edit

Demo 2

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related