CODEWITHSUNDEEP
reactjs
Vranvs
Vranvs

Reputation: 1531

React.js - Pass data to parent method as a parameter from child

I am simply trying to pass a value back up to a parent component when I invoke a method in a child component.

I have a parent component called Job. It renders a child component called SummaryChart. When a bar on the barchart is clicked from within SummaryChart, I want it to tell Job which bar was clicked, and to open a modal.

Parent Component

class Job extends Component {
  constructor(props)
  {
    super(props);

    this.state = {
      ...
    }

    this.getSequenceView = this.getSequenceView.bind(this);

  }

  getSequenceView(config, event)
  {
    console.log(config.someData);
    $('#help-modal').modal();
  }

render()
  {
    return (
      
      <SummaryChart
        handleBarClick={() => this.getSequenceView(config, event)}
      />

    );
  }

Child Component

class SummaryChart extends Component {
  constructor(props) {

    super(props);

    this.state = {
      options: {
        chart: {
          events: {
            dataPointSelection:  function(event, chartContext, config) {
              props.handleBarClick(config, event);
            },
        }
     }
  }

  render() {
    return (
      ...
    );
  }
}

I receive the following error when I click:

Uncaught ReferenceError: config is not defined

I'm thinking my error must lie in my parent component when I pass the prop to SummaryChart, but I don't know how else to tell the method to expect two arguments. Other examples have things like hard-coded props as arguments, but I want to use information from ApexCharts click events to pass back up to the parent.

Upvotes: 0

Views: 414

Answers (1)

Yassine Ben Amar
Yassine Ben Amar

Reputation: 56

You're missing the method argument in the child call.

<SummaryChart
        handleBarClick={(config, event) => this.getSequenceView(config, event)}
      />

Upvotes: 1

Related Questions