komal deep singh chahal komal deep singh chahal - 3 months ago 30
React JSX Question

getInitialState was defined on Loginpanel(//Name of my component), a plain JavaScript class

Hello i am quite new to react, i try to remove this error, but nothing works for me.

Please help me with it.
My component is look like this.

error is "getInitialState was defined on Loginpanel, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?"

export default withRouter(class Loginpanel extends React.Component{

constructor(props) {
super(props);
this.state= {
datas1: [],
NotWorking: "UserName OR Password is Wrong",
// comments: AppStore.getAll(),
};
}

getStateFromStore() {
return {
comments: AppStore.getAll()
}
}


componentWillMount() {



firebase.database().ref("UserPassworddata/").once("value", (snapshot) => {

var datas1 = []
snapshot.forEach((data1) =>
{

datas1.push( {

username: data1.val().Username,
password: data1.val().Password,

});

});

this.setState ({
datas1: datas1,
});

});
}





onChange() {
this.setState(comments);
}

getInitialState() {
return comments;
}

componentDidMount() {
AppStore.addChangeListener(this.onChange.bind(this));
console.log(AppStore.addChangeListener(this.onChange.bind(this)));
}

componentWillUnmount() {
AppStore.removeChangeListener(this.onChange.bind(this));
console.log(AppStore.removeChangeListener(this.onChange.bind(this)));
}

checkCred(){

//AppActions.addItem('Yes this is done by me');
var details_array = this.state.datas1 ;
console.log(details_array);
for(var i=0; i < details_array.length; i++){
var currentObject = details_array[i];
if (this.email.value == currentObject.username && this.password.value == currentObject.password){
console.log('yes done it');


this.props.router.push('Index');
AppActions.createComment(currentObject.username,currentObject.password);

var dis = this.state.comments
console.log(dis);

}
else{

console.log('sorry man not working');
}
}
}

render() {

return (
<div>

<Link to="/"> <button className="button1" bsStyle="primary" bsSize="large"> Login </button></Link>
<Link to="Signup"> <button className="button1" bsStyle="primary" bsSize="large"> Signup </button></Link>



<div id="Login">
Email:
<input ref={(e) => this.email = e} className="form-fields" name="email" required="required" type="email" placeholder="User Name" /><br/>
Password:

<input ref={(f) => this.password = f} className="form-fields" name="password" required="required" type="password" placeholder="Password" /><br/>
<button onClick={this.checkCred.bind(this)} className="button1" bsStyle="primary" bsSize="large" > Submit </button>




</div>
</div>
)
}
})

Answer

In the es6 class you don't use getInitialState anymore, instead you use the following in your constructor

this.state = {
    comments: []
}

You almost had it! Just need to remove the getInitialState block and uncomment your "comments" field in your constructor :)

Comments