CODEWITHSUNDEEP
reactjs
user3828016
user3828016

Reputation:

How to call parent class function in child class in React JS

Following is my code snippet

Child Class function (handleClick)

import React, { Component } from 'react';
import {render} from 'react-dom';

export class Badge extends Component {
  handleClick() {
    alert("this and that")
  }
  render() {
    return (
      <button whenClicked={this.handleClick} className={"btn " + this.props.className} type="button">
        {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
      </button>
    );
  }
}

Parent Class

export class Dropdown extends Component {
  render() {
    return (
      <div className="dropdown">
        <Badge onClicked={this.props.whenClicked} className="btn btn-default" title={this.props.title} subTitleClassName="caret" />
      </div>    
    );
  }
}

In above code whenever I try to call handleClick function in child class it is not working.

Upvotes: 2

Views: 4729

Answers (3)

nils
nils

Reputation: 27174

As pointed out by others, the correct name for the click event attribute is onClick (not whenClick).

Badge (Child):

import React, { Component } from 'react';
import {render} from 'react-dom';

export class Badge extends Component {
  render() {
    return (
      <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button">
        {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
      </button>
    );
  }
}

Which leads me to wonder: Where is your this.props.whenClicked defined, which you want to pass from Dropdown into Badge?

I imagine you want to define it in Dropdown as well and pass it in as this.whenClicked.

Dropdown (Parent):

export class Dropdown extends Component {
  whenClicked(event) {
      // Your event handler
  },
  render() {
    return (
      <div className="dropdown">
        <Badge whenClicked={this.whenClicked} className="btn btn-default" title={this.props.title} subTitleClassName="caret" />
      </div>    
    );
  }
}

To recap:

  1. Your whenClicked is defined in Dropdown and passed as a property into the Dropdown instance..
  2. In badge, you define a onClick listener called handleClick which calls the whenClicked that you passed from Dropdown.

Upvotes: 2

weigel
weigel

Reputation: 98

You got parent and child mixed up. The Dropdown component renders the Badge component, so Dropdown is the parent class. Also the Event handler is called onClick.

Here's the code (in ES5):

Dropdown

var React = require('react');
var Badge = require('./Badge.react');

var Dropdown = React.createClass({

    whenClicked: function() {
        console.log('blabla');
    },

    render: function () {
        return (
            <div className="dropdown">
                <Badge whenClicked={this.whenClicked} className="btn btn-default" title={this.props.title} subTitleClassName="caret"
                subTitle="subTitle" />
            </div>  
        );
    }
});

module.exports = Dropdown;

Badge

var React = require('react');

var Badge = React.createClass({

    render: function () {
        return (
            <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button">
                {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
            </button> 
        );
    }
});

module.exports = Badge;

And in ES6:

Badge

import React from 'react';

class Badge extends React.Component {
    handleClick() {
        this.props.whenClicked();
    }
    render() {
        return (
            <button onClick={this.props.whenClicked} className={"btn " + this.props.className} type="button">
                {this.props.title} <span className={this.props.subTitleClassName}>{this.props.subTitle}</span>
            </button>
        );
    }
}

module.exports = Badge;

Dropdown

import React from 'react';
import Badge from './Badge.react';

class Dropdown extends React.Component {
    whenClicked() {
        console.log('blabla');
    }

    render() {
        return (
            <div className="dropdown">
                <Badge whenClicked={this.whenClicked} className="btn btn-default"
                title={this.props.title} subTitleClassName="caret" subTitle="subTitle"/>
            </div>
        );
    }
}

module.exports = Dropdown;

Upvotes: 3

Dennis Nerush
Dennis Nerush

Reputation: 5663

  1. The dropdown class should define the action that will be called when badge is clicked.
  2. You need to pass a delegate to this function as a property to the badge. You can call the properly whatever you want.
  3. In the badge class you need to change the 'whenClicked' to onClick and pass the this.props.theNameOfTheFunction

Upvotes: 0

Related Questions