0

I am new to Reactjs and I am having an issue with undefined variable. In the console log I am getting "Uncaught ReferenceError: drawResults is not defined app.js:116002" from the following React page:

 import React, { Component } from "react";
    import ReactDOM from "react-dom";
    import { render } from 'react-dom';
    import '@fortawesome/fontawesome-free/css/all.min.css';
    import "bootstrap-css-only/css/bootstrap.min.css";
    import "mdbreact/dist/css/mdb.css";
    import { NumberPicker } from 'react-widgets';
    import NumberPicker from 'react-widgets/lib/NumberPicker'
    import PropTypes from "prop-types";
    import Radium, {Style} from 'radium';
    import { MDBBtn, MDBInput, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter, MDBIcon, 
    MDBBadge, MDBContainer, MDBRow, MDBCol, MDBSelect, MDBInputNumeric} from "mdbreact";
    import { event } from "jquery";
    import axios from 'axios';


class App extends Component {  

    static propTypes = {
        kind: PropTypes.oneOf(['input','button'])
    };

    constructor(props) {
        super(props);
        this.state = {

              drawResults: [],          
              mainDrawSet: 40,
              mainBallsDrawn: 5,
              powerBallSet: 5,
              powerballBallsDrawn: 0
          
        };
       
    }

    componentDidMount(){
        this.fetchResults();
   }
  
    playLotto (mainDrawSet,mainBallsDrawn,powerBallSet,powerballBallsDrawn) {  
        
        fetch('/draw',{                
                method: 'post',
                body: JSON.stringify({draw:this.state}),
                headers: {
                    'Access-Control-Allow-Origin':'*',
                    'Content-Type':'x-www-form-urlencoded',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json;charset=UTF-8',      
                    
                }
            })
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.log(err)
        })
        console.log(this.state);

        
    };

    submit () {
                this.playLotto(this.state.mainDrawSet,this.state.mainBallsDrawn,this.state.powerBallSet,this.state.powerballBallsDrawn)
        

        this.setState({
          
              mainDrawSet: 40,
              mainBallsDrawn: 5,
              powerBallSet: 5,
              powerballBallsDrawn: 0
        })
    };

    exportTasks = (_this) => {
        let _url = $(_this).data('href');
        window.location.href = _url;
     }

    fetchResults = async () => {


        try {
            const res = await fetch('/lotto_results', {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            });
            const res_1 = await res.json();
            return this.setState({ drawResults: res_1.data });
        } catch (err) {
            return console.log(err);
        }
    } 

    render() {
    
        return (        
            <MDBContainer>
                <MDBRow>
                    <MDBCol md="12" className="mb-r">
                        <h2 className="text-uppercase my-3">Lotto Draw Machine:</h2>
                        <div data-test="container" className="container-fluid section mb-5 border p-3">                            
                                                
                            <form className="mx-3 grey-text row" style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1.5rem"}} data-test="row"> 
                                <div className="form-row align-items-center">
                                    <div data-test="col" className="col">
                                        <div className="md-form form-group form-lg md-bg" style={{position: "relative", marginTop: "1.5rem", marginBottom: "1.5rem"}}> 
                                            <label style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1rem"}} htmlFor="mainDrawSet">Number of balls in main draw set</label>
                                            <NumberPicker min={40} max={49} defaultValue={40} type="number" className="custom-select" id="mainDrawSet" value={this.state.mainDrawSet} onChange={mainDrawSet => this.setState({ mainDrawSet})} style={{width: "400px", height: "40px"}}/>                            
                                            <label style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1rem"}} htmlFor="mainDrawSet">Please choose a number between 40 and 49</label>
                                        </div>
                                    </div>
                                    <div data-test="col" className="col">
                                        <div className="md-form form-group form-lg md-bg">
                                            <label style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1rem"}} htmlFor="mainDraw">Number of balls in main draw</label>
                                            <NumberPicker min={5} max={7} defaultValue={5} type="number" className="custom-select" id="mainDraw" value={this.state.mainBallsDrawn} onChange={mainBallsDrawn => this.setState({ mainBallsDrawn })} style={{width: "400px", height: "40px"}}/>
                                            <label style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1rem"}} htmlFor="mainDraw">Please choose a number between 5 and 7</label>      
                                        </div>                            
                                    </div>       
                                </div>                       
                                 
                                <div className="mx-3 grey-text row" style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1.5rem"}} data-test="row"> 
                                    <div className="form-row align-items-center">
                                        <div data-test="col" className="col">
                                            <div className="md-form form-group form-lg md-bg" style={{position: "relative", marginTop: "1.5rem", marginBottom: "1.5rem"}}>
                                                <label htmlFor="powerBallSet" style={{ position: "relative", marginTop: "0.5rem", marginBottom:"0.5rem"}}>Powerball Set</label>
                                                <NumberPicker min={5} max={49} defaultValue={5} type="number" className="custom-select" id="powerBallSet" value={this.state.powerBallSet} onChange={powerBallSet => this.setState({ powerBallSet })} style={{width: "400px", height: "40px"}}/>  
                                                <label htmlFor="powerBallSet" style={{ position: "relative", marginTop: "0.5rem", marginBottom:"0.5rem"}}>Please choose a number between 5 and 49</label>
                                            </div>                            
                                        </div>
                                        <div data-test="col" className="col">
                                            <div className="md-form form-group form-lg md-bg">
                                                <label htmlFor="powerBall" style={{ position: "relative", marginTop: "0.5rem", marginBottom:"0.5rem"}}>Number of powerball balls</label>
                                                <NumberPicker min={0} max={3} defaultValue={0} type="number" className="custom-select" value={this.state.powerballBallsDrawn} onChange={powerballBallsDrawn => this.setState({ powerballBallsDrawn})} id="powerBall" style={{width: "400px", height: "40px"}}/>  
                                                <label htmlFor="powerBall" style={{ position: "relative", marginTop: "0.5rem", marginBottom:"0.5rem"}}>Please choose a number between 0 and 3</label>     
                                            </div>                            
                                        </div>                              
                                    </div>                       
                                </div>
                                <div className="mx-3 grey-text row" style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1.5rem"}} data-test="row">                          
                                    <div data-test="row" className="row">
                                        <button data-test="button" type="button" className="btn-info btn Ripple-parent" style={{width: "400px", height: "40px"}} onClick={()=>{this.submit()}}>Let's Play!<div data-test="waves" className="Ripple "></div></button>
                                    </div>  
                                </div>                                     
                            </form>                        
                        </div>                        
                    </MDBCol>                    
                </MDBRow>
                <MDBRow>
                    <MDBCol md="7" className="mb-r">
                                <div className="mx-3 grey-text row" style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1.5rem"}} data-test="row"> 
                                    <div className="form-row align-items-center">
                                        <div data-test="col" className="col">
                                            <div className="md-form form-group form-lg md-bg" style={{position: "relative", marginTop: "1.5rem", marginBottom: "1.5rem"}}>
                                             <h4 className="text-uppercase my-3">Lotto Results:</h4>                                                   
                                            </div>                            
                                        </div>
                                        <div data-test="col" className="col">
                                            <div className="md-form form-group form-lg md-bg">                        
                                              <button data-href="/tasks" data-test="button" type="button" className="btn-info btn mr-5 Ripple-parent" style={{width: "400px", height: "40px"}} onClick={()=>{this.exportTasks(event.target)}}>Export To CSV</button>
                                            </div>                           
                                        </div>                              
                                    </div>   
                                </div>                                 
                    </MDBCol>                               
                </MDBRow>

                <MDBRow>                
                    
                    <MDBCol md="12" className="mb-r">
                    return {drawResults.map((result, index) => 
                        <div key={index} className="mx-3 grey-text row" style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1.5rem"}} data-test="row"> 
                            <table className="table center">
                                <thead className="grey lighten-2">
                                    <tr>
                                        <th scope="col">Draw Time</th>
                                        <th scope="col"> Draw Result</th>
                                        <th scope="col"> Number of Main Balls Drawn</th>
                                        <th scope="col">Number of Powerball Balls Drawn</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                    <th scope="row">result.draw_time</th>
                                        <td>result.results</td>
                                        <td>result.main_draw_balls</td>
                                        <td>result.power_balls</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>    
                        )}       
                    </MDBCol>         
                </MDBRow>
            
            </MDBContainer>            
        
        );
    }               

     }
        App = Radium(App);

       export default App;

      if (document.getElementById('app')) {
      ReactDOM.render(
        <App />
        , document.getElementById('app'));
     }

May someone suggest how to fix the error. I have declared the state variable inside the constructor and tried to assign a value to it in the fetchResults() method but the script fails with the variable not defined.

2 Answers 2

1

The script fails with a “not defined” error because the variable really is not defined.

You say that you have declared it inside the constructor. What you actually did inside the constructor is to create a property of this.state (or, more accurately, create a property of an object that you then assigned to this.state). That’s fine, but then you need to refer to the property, not a variable.

To fix the error, change drawResults to this.state.drawResults.

Edit: I meant to change this line: return {drawResults.map(...

2
  • Thanks a bunch Brian! this.state.drawResults fixed the error. My bad for not realising that!
    – Richie. K
    Oct 26, 2020 at 15:31
  • Glad to hear it. Around here, we appreciate upvotes more than “thanks!”. Please hit that up button or, even better, mark this answer as accepted. Oct 27, 2020 at 14:20
1

I think your issue comes from the return this.setState({ drawResults: res_1.data });

You can't return a setState since setState just modifies the state of your component, you should try to use this.setState({ drawResults: res_1.data });

1
  • I agree that this line doesn’t make sense. Indeed, the official setState() documentation makes no reference to it returning a value. But I don’t see how it would lead to an error, so it doesn’t answer the question here. Oct 26, 2020 at 14:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.