React: Getting a weird output when trying to add a number to an input value

JavaScript
1

Hi there. I’m attempting to build a simple React app that adds 37 to a number provided by the user, then displays it. The number is provided in one of two ways: via a counter they click on x number of times, or a value the user just simply types into an input box. In the former case, everything is working fine. However, in the case of the number typed in the input, something odd is happening. For example, if I type 5, the output is 537 rather than 42.

class ButtonsNInput extends React.Component{
  constructor (props){
    super (props)
    this.state = {
      count: 0,
      inputVisibility: true,
      buttonsVisibility: true,
    }
    this.addChirp = this.addChirp.bind(this);
    this.subtractChirp = this.subtractChirp.bind(this);
    this.handleChange = this.handleChange.bind(this);
    }
     
    addChirp = () => {
      this.setState({
        count : this.state.count + 1,
        inputVisibility: false,
      })}
    
    subtractChirp = () => {
      this.setState({
        count : this.state.count - 1,
        inputVisibility: false
      })}  
      
    handleChange = (event) => {
      this.setState({
        count: event.target.value,
        buttonsVisibility: false
      })} 


    render () {
    return (
      <div>
    {this.state.buttonsVisibility ? <div><button onClick={this.addChirp}>Add a Chirp</button><button onClick={this.subtractChirp}>Subtract a Chirp</button></div> : <br/>}
        <h1>{this.state.count}</h1>
        {this.state.inputVisibility  ? <div><input onChange={this.handleChange}></input> </div>: null}
        <br/>
        <Submit count={this.state.count}/>
      </div>
    )
  }
}


class Submit extends React.Component {
 constructor (props) {
   super(props)
   this.state ={
      SubmitClicked : false,
   }
 this.handleClick1 = this.handleClick1.bind(this);
   
 }
  
 
   handleClick1 = () => {
      this.setState({
         SubmitClicked: true,
       })}
   
  render (){
    return(
      <div>
        <button onClick={this.handleClick1}>Submit</button>
        {this.state.SubmitClicked ? <div> <p>It's {this.props.count + 37}°F outside!</p> <br/></div> : null}
        </div>)
        
}
      }

Here’s the codepen, it’s got some extra fluff, but the bones are the same:

I’m not certain, but I think it’s got something to do with using event.target.value to update the state of count. Can anyone point me in the right direction?

4

Thanks for taking the time to respond!I changed it to 1 in a last ditch debugging attempt before posting here, but I must’ve goofed and forgot to change that back to 37.

I did a little googling, and it looks like you were trying to point me in the parseInt direction. I appreciate you not just giving me the answer outright, and this definitely solves my issue. Just for future reference, is there a way to set the value to the submitted number straight away rather than converting the string to a number?

1 Like
6

Interesting. But if event.target.value is always a string, then why do the addChirp and subtractChirp methods work? I haven’t done any special conversions there, and followed a similar strategy to what is used in the “Build a Simple Counter” React challenge.

8

That makes sense. Thanks again for all your help!