0

When I called an action creator for an onClick event on material ui RaisedButton, I got the following error

Failed prop type: Invalid prop onClick of type object supplied to RaisedButton, expected function.

This is the component that I've written

import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { connect } from 'react-redux';

import * as actions from '../actions';

class App extends Component {
  authButton = () => {
    if(this.props.authenticated) {
      return <RaisedButton label="Sign out" onClick={this.props.authenticate(false)} />
    }

    return <RaisedButton label="Sign out" onClick={this.props.authenticate(true)} />
  }
  render() {
    return (
        <div>{this.authButton()}</div>
    );
  }
}

const mapStateToProps = (state) => {
  return { authenticated: state.authenticated };
}

export default connect(mapStateToProps, actions)(App);

How to get rid of this error and make it work?

troglodyte07
  • 3,598
  • 10
  • 42
  • 66

1 Answers1

5

Its expecting a function, so try this

onClick={() => { this.props.authenticate(false)}}

sme
  • 4,023
  • 3
  • 28
  • 42