Is it possible to have two states in one reagent component

Question

I am trying to create a simple block converter for practicing React.js. I want to be able to change the value of one device, for example: Kg, and have another block, for example: lb, for automatic changes on the screen. Please check out this site to give you an idea: http://www.convertunits.com/from/lb/to/kg

I have the following code, it displays, but the blocks are not updated. I want to know:

• Is it possible for one component to have two states ? 1 for Kg and another for lb
• Or do they need to be sibling components ? If so, how will they update each other's states ?
• If it is possible to have state for both units in the same component, what am I doing wrong here?

Thanks! (I have a simple express application to display the page)

 import React from 'react'; export default class Converter extends React.Component { render() { return ( <div className="convert"> <Range /> </div> ); } } class Range extends React.Component { constructor(props) { super(props); this.state = { kg: null, lb: null }; } kgClick() { this.setState({ lb: state.kg * 2.2046 }); } lbClick() { this.setState({ kg: state.lb / 2.2046 }); } render() { return ( <div> <label> Kg: </label> <input type="number" name="Kg" onChange={this.kgClick} value={this.state.kg} /> <label> Lb: </label> <input type="number" name="Lb" onChange={this.lbClick} value={this.state.lb} /> </div> ); } } 

Backend Logic:

 var express = require('express'); var app = express(); app.set('port', (9000)); app.set('view engine', 'jsx'); app.set('views', __dirname + '/views'); app.engine('jsx', require('express-react-views').createEngine({ transformViews: false })); require('babel/register')({ ignore: false }); app.use('/', function(req, res) { res.render('index', ""); }); app.listen(app.get('port'), function() {}); 

Answer 1

Yes, it is quite realistic (and often necessary) to have more than one state property in a React component.

The main problem is that you never pass an instance of the click event for a handler function. Therefore, this function cannot know the value of entering the number. In addition, you need to update the state for both dimensions in your function. This is because you are setting the value for your numeric inputs to the state of that value. When you change the input number, it will not actually change in the rendering of this input, unless you also update the state. Finally, as the queen points out, you must make sure that you bind this correctly. Either bind it to the component instance (for example, I do below), or use the ES6 arrow notation in your handler function.

Given all this, your class will work if it looks something like this:

 class Range extends React.Component { constructor(props) { super(props); this.state = { kg: 0, lb: 0 }; } kgClick(e) { var newLb = e.target.value * 2.2046; this.setState({ kg: e.target.value, lb: newLb }); } lbClick(e) { var newKg = e.target.value / 2.2046; this.setState({ lb: e.target.value, kg: newKg }); } render() { return ( <div> <label> Kg: </label> <input type="number" name="Kg" onChange={this.kgClick.bind(this)} value={this.state.kg} /> <label> Lb: </label> <input type="number" name="Lb" onChange={this.lbClick.bind(this)} value={this.state.lb} /> </div> ); } }