CODEWITHSUNDEEP
reactjsmaterial-ui
vinay kumar
vinay kumar

Reputation: 593

React setState is not setting state

I just started working on React and I am very new to it to build the application I am using material-ui.

I am not getting value in action_name in state;

code.

class LoginForm extends Component {
    render(){return(
      <div>
      Login Form
      </div>
    )}
}

class SignUpForm extends Component {
    render(){return(
      <div>
      SignUp Form
      </div>
    )}
}

export class Login extends Component {
  static muiName = 'FlatButton';
  state = {
  open: false,
  action_name: null,
  };
  handleOpen = () => {
    this.setState({open: true});
    this.setState({action_name: this.name});
  };

  handleClose = () => {
    this.setState({open: false});
  };

  render() {
    let form = null;
    let form_title = null;
    let action_label_cancle = null;
    let action_label_save = null;
    if (this.state.action_name === 'Login') {
      form_title = "Login Form";
      action_label_cancle = 'Cancel';
      action_label_save = 'Login';
      form = <LoginForm />;
    } else {
      form_title = "SignUp Form";
      action_label_cancle = 'Cancel';
      action_label_save = 'SignUp';
      form = <SignUpForm />;
    }
    const actions = [
      <FlatButton
        label={action_label_cancle}
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label={action_label_save}
        primary={true}
        keyboardFocused={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (
      <div>
        <FlatButton {...this.props} label="SignUp" name="SignUp" onTouchTap={this.handleOpen}/>
        <FlatButton {...this.props} label="Login" name="Login" onTouchTap={this.handleOpen}/>
        <Dialog title={form_title} modal={false} actions={actions} open={this.state.open}
                onRequestClose={this.handleClose}>
                { form }
        </Dialog>
      </div>
    );
  }
}

When I click on Login button it is calling handleOpen method and in this method i am setting action_name and accessing in Login Component but I am getting this.state.action_name as undefined. Could any one help me, where to set the state so that i will able to access state.

Upvotes: 0

Views: 813

Answers (1)

BinaryMee
BinaryMee

Reputation: 2142

You are getting this.state.action_name undefined because, this.name is undefined.

You can try to access from the event

  handleOpen = (event) => {
    this.setState({open: true, action_name: event.target.name});
  };

You can also pass name as argument and set it

 <FlatButton {...this.props} 
     label="SignUp" 
     name="SignUp" 
     onTouchTap={() => this.handleOpen("SignUp")}
 />
 <FlatButton {...this.props} 
     label="Login" 
     name="Login" 
     onTouchTap={() => this.handleOpen("Login")}
 />

In your handler

  handleOpen = (name) => {
    this.setState({open: true, action_name: name});
  };

Upvotes: 1

Related Questions