Call a parent component function from a child component

Jarmojo

Fairly new to React. I have a lottery wheel as part of a hobby project website: The Wheel object was downloaded with npm:

npm install lottery-wheel
import Wheel from 'lotter-wheel'
class Lottery extends Component {
   constructor() {
     bla bla 
   }
  
  componentDidMount() {
     new Wheel( {
        el: document.querySelector("#wheel"),
            onSuccess(data) {
              alert(`Congratulations, you picked up ${data.text}`)
              /* I want to pass the data here to Parent */ 
            },
            onButtonHover(anime, button) {
                anime({
                  targets: button,
                  scale: 1.3,
                  perspective: 80,
                  duration: 400
                });
            },
     });
  }

  render() {
  
    return (
      <div id="wheel"></div>
    )
  }
}

SO, In the callback-function 'onSuccess' I want to pass the 'data' from the Wheel child component to the 'Lottery' parent component.

How can I do this? I know how props work but not in this case.. Can I use a hook, in that case, how? I want avoid downloading and going into 'Wheel' definition since it was not created by me.

Drew Reese

Define a function and set as the onSuccess callback in the Wheel.

class Lottery extends Component {
  successHandler = data => {
    alert(`Congratulations, you picked up ${data.text}`);
  };

  componentDidMount() {
    new Wheel({
      el: document.querySelector("#wheel"),
      data: [{
        text: 'apple',
        chance: 20
      }, {
        text: 'banana'
      }, {
        text: 'orange'
      }, {
        text: 'peach'
      }],
      onSuccess: this.successHandler,
      onButtonHover(anime, button) {
        anime({
          targets: button,
          scale: 1.3,
          perspective: 80,
          duration: 400
        });
      }
    });
  }

  render() {
    return <div id="wheel"></div>;
  }
}

Edit call-a-parent-component-function-from-a-child-component

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Call child component function from parent

Unable to call parent component function from child component in React

Call a child component function from parent component in Angular 1.5

angular 4 - call child component function from parent component html

How to have a React child component call a function from a parent component

Call a parent component function from a child component in Angular

How to call React/Typescript child component function from parent component?

Executing child (component) function from the parent component

Parent component to call child component function on a list of children component

Call a function in imported child component on click from a parent element?

Unable to call child function from parent using refs with functional component

How can I call Child function from Parent Component in React

How to call function on child component on parent events

Call function in child component only after function in parent component is completed

Angular call parent component function from child component, update variable in real time from sessionStorage

Call method from parent to child via component

Using a button in parent component to call function in child component

How can I call the function of a parent component inside of a child component?

How to Call child function from parent component in React Native functional component?

Angular 2+ call a function in a child component from its parent component

How to call function in parent class component by onchange event from child component in React?

How to call an event in parent component from child component?

How to call child component's method from a parent component in React

How can I call method in child component from parent component?

How to call child component method from parent component with foreach

Call method of parent class component from child class component

How to call a method in a child component from a parent component?

Call a method pass from parent component to child component in React

angular router how to call child component from the parent component