reactjs - How to use constructor value outside constructor? -

in component i'm receiving array object(3 objects only). want display them separately , want add onclick event them when user clicks of them can render different component each case.
problem accessing variables inside constructor , rest of component outside scope. in situation??

import react, { component } 'react'; import '../app.css'; import {withrouter} 'react-router'; import monthtodate './monthtodate'; import quartertodate './quartertodate'; import yeartodate './yeartodate'; class dashboard extends component {    constructor(props){     super(props);     if(this.props.location && this.props.location.state){       console.log(this.props.location.state.values.o1)       var o1=this.props.location.state.values.o1;       var o2=this.props.location.state.values.o2;       var o3=this.props.location.state.values.o3;     }   }   callmonth = () => { this.props.history.push({pathname: '/monthtodate'}) };   callquarter = () => { this.props.history.push({pathname: '/quartertodate'}) };   callyear = () => { this.props.history.push({pathname: '/yeartodate'}) };    render() {     return (       <div>         <div onclick:{this.callmonth}>           <p>monthtodate: {o1}</p>         </div>         <div onclick:{this.callquarter}>           <p>quartertodate: {o2}</p>         </div>         <div onclick:{this.callyear}>           <p>yeartodate: {o3}</p>         </div>       </div>     );   } }  export default dashboard;           

note: doing {this.props.location.state.values.o1} doesn't work inside return requires if condition idk why. after googling came know there no class variable in react. instead has context it's official docs it experimental api , break in future releases of react.

the above component called login component ie login.js below:

import react, { component } 'react'; import '../app.css'; import dashboard './dashboard'; import {withrouter} 'react-router'; var axios = require('axios');  class login extends component {   constructor(props){     super(props);     //this.state = {istoggleon: true};     this.loaddashboard = this.loaddashboard.bind(this);     this.handleonsubmit = this.handleonsubmit.bind(this);     this.setdata = this.setdata.bind(this);     this.state = {values:null}   }   setdata(data){     this.setstate({values:data});     //console.log(data);     this.props.history.push({       pathname: '/dashboard',       state: { values: data }   })   }   loaddashboard(token){     console.log(token);     axios({       method:'get',       url:'http://localhost:3000/api/dashboard',       headers: {         authorization: `bearer ${token}`,       },     })      .then( (response) => {       // console.log(response.data);       //  this.props.history.push('/dashboard',this.state.values);        this.setdata(response.data);      })      .catch(function (error) {        console.log("error in loading dashboard "+error);      });   }    handleonsubmit = () => {      //console.log("submittwed");      axios({        method:'post',        url:'http://localhost:3000/authenticate',        data: {          email: 'test@mail.com',          password: 'apple'        },      })       .then((response) => {         var token = response.data.auth_token;       //  console.log(token);         this.loaddashboard(token);       })       .catch(function (error) {         console.log("error in login "+error);       });    }    render() {     return (       <div>          username: <input type="email" name="fname" /><br />          password: <input type="password" name="lname" /><br />          <button onclick={this.handleonsubmit}>log in</button>            </div>     );   } }  export default login;        

• how pass variable throughout class. (note: don't want change in future, want display no redux pls).
• is there better approach tackle problem?

you can use local component state below:

constructor(props){     super(props);     if(this.props.location && this.props.location.state){       this.state = {         o1 : this.props.location.state.values.o1,         o2 : this.props.location.state.values.o2,         o3 : this.props.location.state.values.o3       }     }   } 

then use in render or whatever method need below:

render() {     return (       <div>         <div onclick={()=>{this.callmonth()}}>           <p>monthtodate: {this.state.o1}</p>         </div>         <div onclick={()=>{this.callquarter()}}>           <p>quartertodate: {this.state.o2}</p>         </div>         <div onclick={()=>{this.callyear()}}>           <p>yeartodate: {this.state.o3}</p>         </div>       </div>     );   } 

hope helps.