Help in this.props in React

1

I have the following piece of code where I want to return the text “INVALID USER NAME OR PASSWORD” into this.prop.text in the login class. I dont see any error but it isnt returning it. I need help with this. Thanks!

import React, { PropTypes } from 'react';
import { Link } from 'react-router';
import { observer } from 'mobx-react';
import _ from 'lodash';

//eslint-disable-next-line
class ButtonClick extends React.Component {
static propTypes = {
    // eslint-disable-next-line
  text: React.PropTypes.string,
  };

constructor(props) {
  super(props);
  this.handleButtonClick = this.handleButtonClick.bind(this);
  this.checkUserName = this.checkUserName.bind(this);
}

//eslint-disable-next-line
checkUserName() {
  const bool = false;
  return bool;
}


handleButtonClick() {
  if (this.checkUserName() === false) {
    return (
      //eslint-disable-next-line
      <Login text="INVALID USERNAME AND PASSWORD" />
    );
  }
  return (
    <Login text="GET BIZZY" />
    );
}
}

@observer
//eslint-disable-next-line
class Login extends React.Component {
  static propTypes = {
    // eslint-disable-next-line
  text: React.PropTypes.string,
  };

render() {
  return (
    <div className="reg-wrapper">
      <span className="title"><b>LOG IN</b></span>
      <span className="title pull-right"> OR <Link to="/register"><b>CREATE AN ACCOUNT</b> </Link></span>
      <input type="text" placeholder="COMPANY EMAIL" className="input-field full-field" />
      <input type="password" placeholder="PASSWORD" className="input-field full-field" />
      <div className="bottom-text"><b>{this.props.text}</b> </div>
      <button onClick={this.handleButtonClick} className="submit-button"> LOG IN </button>
    </div>
  );
}
}

Login.propTypes = {
};

export default Login;
2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

1 Like
3

Your Login component needs a constructor.

constructor(props) {
    super(props);
}

Also, handleButtonClick isn’t going to be accessible to your Login component as you have it now.

1 Like