Guess the number with React

We create two components App and Result. App components contain all the logic, it is stateful and the Result component only shows the appropriate message on the page according to the user’s guess. The App component has a controlled input field in which the user allowed to type and guess the number. There is a default prop we set to the App component ‘secret’ that holds the required secret number and it is generated randomly. The app component passes the value of the input field and the secret number to the Result component. The result component accordingly show the appropriate message that the guessed number is high or low or correct.

Prerequisite:

Example: Here we will edit the index.html file and app.js file accprding our requirement. For the result we will create a component and desing the output component.

  • index.js:

    Javascript



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    chevron_right

    
    

  • app.js :

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
    import Result from './Result'
      
    class App extends Component{
      
      static defaultProps =  {
        secret : Math.floor(Math.random() * 20) + 1
      }
      
      constructor(props){
        super(props)
        this.state = { term : '' }
      
        this.handleChange = this.handleChange.bind(this)
      }
      
      handleChange(event){
        this.setState({
          [event.target.name] : event.target.value
        })
      }
      
      render(){
        return (
          <div>
            <div>
              <label htmlFor='term'>
                Guess Number between 1 to 20
              </label>
            </div>
            <input
              id='term' 
              type='text' 
              name='term' 
              value={this.state.term} 
              onChange={this.handleChange} 
            />
        
            <Result term={this.state.term} 
                secretNum={this.props.secret} />
          </div>
        )
      }
    }
    export default App

    chevron_right

    
    

  • Result.js: This component is created for the result.

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
      
    const Result = ({ term , secretNum }) => {
      let result;
      if(term){
        if(secretNum > term){
          result = 'You guessed Lower'
        }
        else if(secretNum < term){
          result ='You guessed Higher'
        }
        else{
          result ='Yippee, guessed it!'
        }
      }
      return <h3>{result}</h3>
    }
      
    export default Result

    chevron_right

    
    

Output :

Number Guessing App

react-js-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.