React Input don't change when I set a initial value

user_15302368 0
Viewed 820

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 component:

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>
  )
}
reactjs javascript
3 Answers

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 });
user_13770020

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.

user_15140490

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 })
  }
user_149863720
Related