I am creating CRUD using ReactJS but I have a problem with the React Forms.

in some cases, I need to set an initial value in my input and I am using a logical operator for this, everything is ok, but when I change the value from the input, the value from the input doesn't change.

My ponent:

export function Modal(props) {

  const [inputsValues, setInputsValues] = useState({
    id: '',
    nameInput: '',
    emailInput: '',
    phoneInput: ''
  })

  const handleInputChange = (event) => {
    console.log(event.target.value)
    inputsValues[event.target.name] = event.target.value
    setInputsValues()
  }
  const handleFormSubmit = (event) => {
    event.preventDefault()
    console.log(inputsValues)
  }

  return (
    <div className={`area-modal ${props.isOpen ? 'open' : null}`}>
      <div className="modal">
        <h1>{props.title}</h1>
        <form onSubmit={handleFormSubmit} action="">
          <label htmlFor="">Name</label>
          <div className="area-input">
            <input
              type="text"
              name="nameInput"
              value={inputsValues.nameInput}
              onChange={handleInputChange}
            />
          </div>
          <label htmlFor="">Phone</label>
          <div className="area-input">
            <input
              type="text"
              name="phoneInput"
              value={props.dataForm ? props.dataForm.phone : ''}
              onChange={handleInputChange}
            />
          </div>
          <label htmlFor="">Email</label>
          <div className="area-input">
            <input
              type="email"
              name="emailInput"
              value={props.dataForm ? props.dataForm.email : ''}
              onChange={handleInputChange}
            />
          </div>
          <button>{props.buttonText}</button>
        </form>
      </div>
    </div>
  )
}

I am creating CRUD using ReactJS but I have a problem with the React Forms.

in some cases, I need to set an initial value in my input and I am using a logical operator for this, everything is ok, but when I change the value from the input, the value from the input doesn't change.

My ponent:

export function Modal(props) {

  const [inputsValues, setInputsValues] = useState({
    id: '',
    nameInput: '',
    emailInput: '',
    phoneInput: ''
  })

  const handleInputChange = (event) => {
    console.log(event.target.value)
    inputsValues[event.target.name] = event.target.value
    setInputsValues()
  }
  const handleFormSubmit = (event) => {
    event.preventDefault()
    console.log(inputsValues)
  }

  return (
    <div className={`area-modal ${props.isOpen ? 'open' : null}`}>
      <div className="modal">
        <h1>{props.title}</h1>
        <form onSubmit={handleFormSubmit} action="">
          <label htmlFor="">Name</label>
          <div className="area-input">
            <input
              type="text"
              name="nameInput"
              value={inputsValues.nameInput}
              onChange={handleInputChange}
            />
          </div>
          <label htmlFor="">Phone</label>
          <div className="area-input">
            <input
              type="text"
              name="phoneInput"
              value={props.dataForm ? props.dataForm.phone : ''}
              onChange={handleInputChange}
            />
          </div>
          <label htmlFor="">Email</label>
          <div className="area-input">
            <input
              type="email"
              name="emailInput"
              value={props.dataForm ? props.dataForm.email : ''}
              onChange={handleInputChange}
            />
          </div>
          <button>{props.buttonText}</button>
        </form>
      </div>
    </div>
  )
}

• javascript
• reactjs

Share Improve this question Follow edited Jul 20, 2021 at 6:58 Sanira Liyanage 1,24733 gold badges1515 silver badges3232 bronze badges asked Jul 20, 2021 at 2:12 PedrohhcunhaPedrohhcunha 5122 silver badges66 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Instead of

inputsValues[event.target.name] = event.target.value;
setInputsValues();

you need to use setInputsValues to update the state with the new value:

const { name, value} = e.target;
setInputsValues({ ...inputsValues, [name]: value });

You need to pass the updated input data into your setInputsValues, for example:

  const handleInputChange = (event) => {
    console.log(event.target.value)
    inputsValues[event.target.name] = event.target.value
    setInputsValues({...inputsValues});
  }

When working with object-based states like this, it is usually good practice to use the destructured assignment to ensure the state updates.

When you're using reacts useState, you don't need to set the state manually. It handles state for you. Also it's better to use object spread to change the state. So you can change handleInputChange same the bellow:

  const handleInputChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputsValues({...inputsValues, [name] : value })
  }