Error in dynamically setting state in React Hooks

Question

Hi I am dynamically trying to set input values in react-hooks concept, but I am encountering an error. Could someone help me with this:

Code:

import React,{useState} from 'react';

function ObjectHook() {
    var [names,setName]=useState({fname:'',lname:''});
    let UpdateData = (event) =>{
        setName({...names,[event.target.name]:event.target.value})
    }
    return(
        <div>
            <input type='text' name='fname' value={names.fname} onChange={UpdateData}>First Name</input>
            <input type='text' name='lname' value={names.lname} onChange={UpdateData}>Last Name</input>
            <h1>{names.fname}</h1>
            <h1>{names.lname}</h1>
        </div>
    )
}

export default ObjectHook;

here is the error:

Alexander Vidaurre Arroyo · Accepted Answer · 2019-12-21 15:47:46Z

1

Use placeholder instead of child text

<input type='text' name='fname' value={names.fname} onChange={UpdateData} placeholder='First Name' />

answered Dec 21, 2019 at 15:47

Alexander Vidaurre Arroyo

2,24213 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ari · Accepted Answer · 2019-12-21 16:05:49Z

1

inputs don't accept children. Meaning you can't do this ...

<input>text</input>

You can use the input placeholder attribute, but placeholders are not accessible.

The best thing to do is use a label.

<label>
  First Name<
  <input />
</label>
<label>
  Last Name<
  <input />
</label>

answered Dec 21, 2019 at 16:05

Ari

1,72313 silver badges21 bronze badges

Collectives™ on Stack Overflow

Error in dynamically setting state in React Hooks

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related