REACT: How to bind and render multiple values

Question

I am new to REACT and I have been practicing a lot for the past week. I have a VUE background. I have created simple React form with just two fields. I kind of know how state and binding works. I am having a hard time rendering the values in my two fields. Here's what I have so far:

class HelloWorld extends React.Component{
constructor(){
super()
this.state = {
  fname: '',
  lname: ''
}
this.handleClick = this.handleClicl.bind(this)
this.handleFname = this.handleFname.bind(this)
this.handleLname = this.handleLname.bind(this)
}

handleClick(){
console.log(this.state.fname);
console.log(this.state.lname);
}
handleFname(event){
this.setState({fname:event.target.value})
}
handleLname(event){
this.setState({lname:event.target.value})
}
render(){
return(
 <div>
    <label for="fname">First name:</label><br />
    <input type="text" onChange={this.handleFname} id="fname" name="fname" value={this.state.fname} /><br />
    <label for="lname">Last name:</label><br />
    <input type="text" onChange={this.handleLname} id="lname" name="lname" value={this.state.lname} /><br /><br />
  <button onClick={this.handleClick}>Submit</button>
</div>
)
}
}

ReactDOM.render(
 <HelloWorld />,
 document.getElementById("root")
)

What am I doing wrong? Please keep it very simple. No need to add es6. Simple is the only way I can understand at this point.

Here's the codepen Thanks!

Please, for the sake of all here on SO, yours and everyone reading the code after you: USE indentation — Martin.
– Martin., Commented Apr 9, 2020 at 0:36

Dekel · Accepted Answer · 2020-04-09 00:33:05Z

1

You had a typo in your binding:

this.handleClick = this.handleClicl.bind(this)
                                  ^

Should be

this.handleClick = this.handleClick.bind(this)

answered Apr 9, 2020 at 0:33

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

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

5 Comments

OLA Over a year ago

Thank you! Is there a better way to do the form? What if I had 50 fields? Do I bind and setState 50 times? Thanks!

Dekel Over a year ago

You can use libs to do this for you (you can search google for react form libraries, there are plenty).

Nick Kinlen Over a year ago

If you use ES6 arrow functions you don't have to manually bind. Turn your functions into arrow functions.

OLA Over a year ago

Now the page is bland but not errors. anyone know why? codepen.io/isogunro/pen/e878dd7413566cad8c1a46a5a83b6648

Dekel Over a year ago

I don't see any issues there... regardless - you should not log the event.

Martin. · Accepted Answer · 2020-04-09 00:38:32Z

1

Besides the typo stated in other answer, I wanted to also give you a nice tip. You can use this arrow notation so you don't have to manually bind this to the function:

handleFname = (event) => {
    this.setState({fname:event.target.value})
}

By using this, you don't have to bind the this all the time. It's done automatically under the hood.

Note: Constructor is an exception for this, it needs to be defined as you have it already.

answered Apr 9, 2020 at 0:38

Martin.

10.5k3 gold badges45 silver badges69 bronze badges

Comments

Legwan · Accepted Answer · 2020-04-09 00:40:13Z

1

If you don't have to bind, you can just use arrow functions, which are bound automatically. For example instead of

handleClick () {

}

write

handleClick = () => {

}

answered Apr 9, 2020 at 0:40

Legwan

513 bronze badges

Comments

Carlos Saiz Orteu · Accepted Answer · 2020-04-09 00:52:43Z

0

As all your functions are single line I would suggest you to put them straight on the onChange prop:

OnChange={(e) => this.setState({lname:event.target.value})}

Do it with handleFname and handleLname.

Just a little thing to improve performance when app gets bigger!

answered Apr 9, 2020 at 0:52

Carlos Saiz Orteu

1,8151 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

REACT: How to bind and render multiple values

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related