Question posted in 
I’m opening otp modal component in login register page by using ref. I have created ref this.otpModalRef = React.createRef(); in constructor and calling this.showModal in register api success but it giving undefined below is my code. If I removed this.otpModalRef = React.createRef(); from constructor then modal works but when I click on login then it gives onOpenModal undefined. So I have to createRef in constructor. Any idea why is happening? I’m new to reactjs
below is my code
static contextTypes = {
router: PropTypes.object
}
constructor(props,context){
super(props,context);
this.state = {
fname:'',
lname:'',
emailaddress:'',
password:'',
mobile:'',
user:'',
login_pass:''
}
this.regi_data = this.regi_data.bind(this);
this.login_data = this.login_data.bind(this);
this.otpModalRef = React.createRef();
}
regi_data(e){
this.setState({[e.target.name] : e.target.value}
);
}
login_data(e){
this.setState({[e.target.name] : e.target.value})
}
otpModalRef = ({onOpenModal}) => {
this.showModal = onOpenModal;
}
componentDidMount(){
}
login = (e) => {
e.preventDefault();
axios.post('/api/signin', {
user:this.state.user,
password:this.state.login_pass,
})
.then(res => {
console.log(res);
this.context.router.history.push({
pathname:'/',
});
})
.catch(function (error) {
console.log(error.message);
})
}
register = (e,ref) => {
e.preventDefault();
axios.post('/api/user/add', {
firstname: this.state.fname,
lastname:this.state.lname,
email:this.state.emailaddress,
password:this.state.password,
mobile:this.state.mobile
},
)
.then(res => {
console.log(res);
this.showModal();
})
}
Below is render code
render(){
return(
<div className="kr-logincontent">
<div className="kr-themetabs">
<ul className="kr-tabnavloginregistered" role="tablist">
<li role="presentation" className="active"><a href="#kr-loging" data-toggle="tab" aria-expanded="false">Log in</a></li>
<li role="presentation" className=""><a href="#kr-register" data-toggle="tab" aria-expanded="true">Register</a></li>
</ul>
<div className="tab-content kr-tabcontentloginregistered">
<div role="tabpanel" className="tab-pane fade active in" id="kr-loging">
<form onSubmit={this.login} className="kr-formtheme kr-formlogin">
<fieldset>
<div className="form-group kr-inputwithicon">
<i className="icon-profile-male"></i>
<input value={this.state.user} onChange={this.login_data} type="text" name="user" className="form-control" placeholder="Username Or Email"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-icons208"></i>
<input value={this.state.login_pass}onChange={this.login_data} type="password" name="login_pass" className="form-control" placeholder="Password"/>
</div>
<div className="form-group">
<div className="kr-checkbox">
<input type="checkbox" name="remember" id="rememberpass2"/>
<label htmlFor="rememberpass2">Remember me</label>
</div>
<span><a href="#">Lost your Password?</a></span>
</div>
<button className="kr-btn kr-btngreen" >login</button>
</fieldset>
</form>
</div>
<div role="tabpanel" className="tab-pane fade " id="kr-register">
<form onSubmit={this.register} className="kr-formtheme kr-formlogin">
<fieldset>
<div className="form-group kr-inputwithicon">
<i className="icon-profile-male"></i>
<input type="text" onChange={this.regi_data} value={this.state.fname} name="fname" className="form-control" placeholder="Firstname"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-profile-male"></i>
<input type="text" onChange={this.regi_data} value={this.state.lname} name="lname" className="form-control" placeholder="Lastname"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-icons208"></i>
<input type="email" onChange={this.regi_data} value={this.state.emailaddress} name="emailaddress" className="form-control" placeholder="Email Address"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-lock-stripes"></i>
<input type="password" onChange={this.regi_data} value={this.state.password} name="password" className="form-control" placeholder="Password"/>
</div>
<div className="form-group kr-inputwithicon">
<i className="icon-phone"></i>
<input type="number" onChange={this.regi_data} value={this.state.mobile} name="mobile" className="form-control" placeholder="Mobile"/>
</div>
<button className="kr-btn kr-btngreen">Register</button>
</fieldset>
</form>
</div>
</div>
</div>
<div className="kr-shareor"><span>or</span></div>
<div className="kr-signupwith">
<h2>Sign in With...</h2>
<ul className="kr-signinloginwithsocialaccount">
<li className="kr-facebook"><a href="javascript:void(0);"><i className="icon-facebook-1"></i><span>Facebook</span></a></li>
<li className="kr-twitter"><a href="javascript:void(0);"><i className="icon-twitter-1"></i><span>Twitter</span></a></li>
<li className="kr-googleplus"><a href="javascript:void(0);"><i className="icon-google4"></i><span>Google +</span></a></li>
</ul>
</div>
<div className="otp_modal">
<Otp ref={this.otpModalRef} ></Otp>
</div>
</div>
)
}
2
Answers
First point is that below code overwrites your created ref in your constructor.
otpModalRef = ({onOpenModal}) => {
this.showModal = onOpenModal;
}
second point is that you need to define this.showModal = null in your constructor.
could you provide render function and JSX code please?
I hope it helps you a bit to change your implementation.