Question 306959 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React State update issue for edit form

import React, { useState } from "react";

const Form = () => {
  const [value, setValue] = useState("");
  const [readOnly, setReadOnly] = useState(false);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form submission logic here
    setReadOnly(true);
  };

  const handleEdit = () => {
    console.log(readOnly);
    setReadOnly(false);
    console.log(readOnly);
  };

  return (
    <form onSubmit={handleSubmit}>
      {readOnly ? (
        <span>{value}</span>
      ) : (
        <input
          type="text"
          value={value}
          onChange={handleChange}
        />
      )}
      <br />
      {readOnly ? (
        <button onClick={handleEdit}>Edit</button>
      ) : (
        <button type="submit">Submit</button>
      )}
    </form>
  );
};

export default Form;

When I click the edit button the state change is not happening properly, How can I control this submit and edit option with react state.
I want the option to edit the value when click edit, but there is some asynchronous nature of react is not allowing me to edit

Tags:

3

Answers


  1. 0

    When you have "submit" type in the form, when there is action, the submit is also called by default. To fix that you can change your submit button to

            <button id="submt" type="button" onClick={handleSubmit}>Submit</button>
    Login or Signup to reply.
  2. 0 
        import React, { useState } from 'react';

export function App(props) {
  const [inputData, setInputData] = useState("");
  const [inputSubmitData, setInputSubmitData] = useState("");
  const [readOnly, setReadOnly] = useState(false);

  const handleInput = (e) => {
    setInputData(e.target.value);
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    setInputSubmitData(inputData);
    setReadOnly(true);
  }

  const handleEdit = () => {
    setReadOnly(false);
  }

  return (
    <>
      {readOnly ? (
        <>
          <h1>{inputSubmitData}</h1>
          <button onClick={handleEdit}>Edit</button>
        </>
      ) : (
        <form onSubmit={handleSubmit}>
          <input type="text" placeholder="enter" value={inputData} onChange={handleInput} readOnly={readOnly} />
          <button type="submit">Enter</button>
        </form>
      )}
    </>
  );
}
    Login or Signup to reply.
  3. 0

    When you call setReadOnly(false) in the handleEdit function, React does not immediately update the state. Therefore, when you log readOnly right after calling setReadOnly(false), it may still show the previous state value.

    You can use the functional form of setState, which accepts the previous state and returns the new state based on it.

    import React, { useState } from "react";

const Form = () => {
  const [value, setValue] = useState("");
  const [readOnly, setReadOnly] = useState(false);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form submission logic here
    setReadOnly(true);
  };

  const handleEdit = () => {
    // Use the functional form of setState to ensure the latest state
    setReadOnly((prevReadOnly) => !prevReadOnly);
  };

  return (
    <form onSubmit={handleSubmit}>
      {readOnly ? (
        <span>{value}</span>
      ) : (
        <input type="text" value={value} onChange={handleChange} />
      )}
      <br />
      {readOnly ? (
        <button onClick={handleEdit}>Edit</button>
      ) : (
        <button type="submit">Submit</button>
      )}
    </form>
  );
};

export default Form;

    I’ve replaced setReadOnly(false) with setReadOnly((prevReadOnly) => !prevReadOnly).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search