I have ponent with button and 2 functions.Button ponent used in various ponents. And for some need one function for onclick event, for other - second. How can I change functions for onclick event? I'm using this answer, but always getting undefined in my ponents.

export default class MyButtonComponent extends Component {

constructor(props) {
    super(props);
    propTypes: {
        onClick: PropTypes.func
    };
    this.state = { loading: false, api_url: "http://localhost:8000" };
}

 static get DefaultProps() {
  return {
    onClick: this.firstFunction(event)
  }
}

firstFunction(){
/*some code*/
}

secondFunction(){
/*some code*/
}

render() {
    return (
        <LaddaButton
            loading={this.state.loading}
            onClick={this.props.onClick}
            className='submit'
            data-color="#eee"
            data-style={SLIDE_UP}
            data-spinner-size={30}
            data-spinner-color="#ddd"
            data-spinner-lines={12}
            data-url={this.props.url}
        >
            Отправить
        </LaddaButton>

    );
}

And in another ponent:

<FormGroup>
     <Col mdOffset={5} md={7}>
         <MyButtonComponent onClick={this.secondFunction} data-url="someurl"></MyButtonComponent>
     </Col>
</FormGroup>

Also tried add

onClick={e => this.secondFunction(e)} 

to button ponentm but always getting error

_this2.secondFunction is not a function

I have ponent with button and 2 functions.Button ponent used in various ponents. And for some need one function for onclick event, for other - second. How can I change functions for onclick event? I'm using this answer, but always getting undefined in my ponents.

export default class MyButtonComponent extends Component {

constructor(props) {
    super(props);
    propTypes: {
        onClick: PropTypes.func
    };
    this.state = { loading: false, api_url: "http://localhost:8000" };
}

 static get DefaultProps() {
  return {
    onClick: this.firstFunction(event)
  }
}

firstFunction(){
/*some code*/
}

secondFunction(){
/*some code*/
}

render() {
    return (
        <LaddaButton
            loading={this.state.loading}
            onClick={this.props.onClick}
            className='submit'
            data-color="#eee"
            data-style={SLIDE_UP}
            data-spinner-size={30}
            data-spinner-color="#ddd"
            data-spinner-lines={12}
            data-url={this.props.url}
        >
            Отправить
        </LaddaButton>

    );
}

And in another ponent:

<FormGroup>
     <Col mdOffset={5} md={7}>
         <MyButtonComponent onClick={this.secondFunction} data-url="someurl."></MyButtonComponent>
     </Col>
</FormGroup>

Also tried add

onClick={e => this.secondFunction(e)} 

to button ponentm but always getting error

_this2.secondFunction is not a function

• javascript
• reactjs

• is secondFunction defined in the parent ponent where the <FormGroup> is defined ? – Olivier Boissé Commented Feb 7, 2017 at 13:35
• no, form group from another ponent, secondfunction defined in button ponent. – Simple runner Commented Feb 7, 2017 at 13:37
• secondFunction should not be defined in MyButtonComponent, it should be defined in the parent ponent – Olivier Boissé Commented Feb 7, 2017 at 13:39
• do you want to pass to button some kind of flag which specify what effect method from button should be fired or you want to pass method to be fired from parent? – Kasia Commented Feb 7, 2017 at 13:46
• second variant seems to be what I need – Simple runner Commented Feb 7, 2017 at 13:50

2 Answers 2

The problem looks to be with how you're using this - when you call this.secondFunction in the <FormGroup> element of your other ponent, it's looking for secondFunction in that ponent. You've defined secondFunction in MyButtonComponent, so it's ing back as undefined.

You could get around this by defining a single click handler in MyButtonComponent that chooses which function to call based on a prop that you can update externally. E.g.

function myClickHandler(e) {
    if(useFirst) {
        this.firstFunction(e);
    } else {
        this.secondFunction(e);
    }
}

Then you could change that property in the render method of your other ponent, e.g.

<FormGroup>
    <Col mdOffset={5} md={7}>
        <MyButtonComponent useFirst=false data-url="someurl."></MyButtonComponent>
    </Col>
</FormGroup>

Since you are passing secondFunction() as a prop to the MyButtonComponent ponent and hence it must not be defined in the MyButtonComponent ponent but in the ponent in which you have the below code

<FormGroup>
     <Col mdOffset={5} md={7}>
         <MyButtonComponent onClick={this.secondFunction} data-url="someurl."></MyButtonComponent>
     </Col>
</FormGroup>

In the MyButtonComponent you can reference it as this.props.onClick() but it must be defined in the calling ponent

Also you need to bind the function while passing it as a prop to the MyButtonComponent like

<FormGroup>
     <Col mdOffset={5} md={7}>
         <MyButtonComponent onClick={this.secondFunction.bind(this)} data-url="someurl."></MyButtonComponent>
     </Col>
</FormGroup>

Check the answer here to understand the flow better