CODEWITHSUNDEEP
javascripthtmlreactjs
DanielLr0
DanielLr0

Reputation: 23

Problem in React typing text in a field text

This is how I have the code to save the changes

const handleChange = (e) => {
  let { Nombre, value } = e.target; 
  setState({ ...state, [Nombre]: value });
};

And in the text field I have this: The problem here is when put the field "Value", when I give the value="Nombre" it makes it impossible to write in the text field.

<Form.Group>
  <Form.Label style={{textAlign:"left"}}>Nombre</Form.Label>
  <Form.Control
    type="text"
    placeholder="Nombre"
    name="Nombre"
    value="Nombre"
    onChange={handleChange}
  />
</Form.Group>

Upvotes: 1

Views: 62

Answers (1)

Drew Reese
Drew Reese

Reputation: 203457

Issue

The issue is that you are not destructuring the correct event property to update state.

Solution

Destructure the name and value event properties. You'll also want to be in the habit of using functional state updates to update the state and avoid issues related to stale state enclosures.

Example:

const handleChange = (e) => { 
  const { name, value} = e.target; 
  setState(state => ({
    ...state,
    [name]: value
  }));
};

Upvotes: 1

Related Questions