react js trigger function from any other component

Question

I have a component that basically loads a video in an overlay using JW Player (simplified example below).

import React, { Component } from 'react'
import ReactJWPlayer from 'react-jw-player'

class VideoPopup extends Component {

render() {
    return (            
        <div id="video">
            <ReactJWPlayer 
              playerId='video-player'
              playerScript='https://content.jwplatform.com/libraries/vr6ybmGf.js'
              file='path to video file'
            />
        </div>

    )
  }
}

export default VideoPopup;

I would like the component to sit directly in the root of my app, but I need to be able to display it when called from ANY other component - this might be a child component, a child of a child, a sibling etc. etc. I was hoping to be able to call it and pass the video file reference simply like below:

<button onClick={somehow show video popup}>show video popup</button>

I understand how to do this easily if there is a direct parent-child relationship, but not if I want to place the link in a variety of different components; I hope someone can point me in the right direction.

Thanks @Andrew - seems it will be worth my time to get my head around Redux — ronnie burns
– ronnie burns, Commented Sep 10, 2017 at 9:49

JulienD · Accepted Answer · 2017-09-10 09:29:19Z

3

If you want to get rid of the parent-children relationships when it comes to actions, use an event manager like Redux (react-redux). It is pretty standard an becomes necessary as your app grows anyway.

The principle is that wherever you place your link, it will fire an "action" on click, which is sent to a global dispatcher that other components listen to for changes.

answered Sep 10, 2017 at 9:29

JulienD

7,32310 gold badges57 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ronnie burns Over a year ago

Thanks @JulienD - I thought this might be the case. I was hoping for a quick sticky-tape solution for now but it seems I should just dive in and get my head around Redux

Amit Chawla · Accepted Answer · 2017-09-10 10:01:19Z

1

Multiple ways to do this

You can define a function that controls the show/hide functionality of the video player in the app component itself and pass it down as a prop to all the components where the event can be fired.
Use Redux. This is the ideal choice. You just have to dispatch an action from anywhere in your app and the corresponding reducer will take care of the functionality.
Using a global function (not recommended).

Please comment if you need more explanation.

answered Sep 10, 2017 at 10:01

Amit Chawla

441 silver badge6 bronze badges

3 Comments

ronnie burns Over a year ago

how would I perform the first one - will it work even if the event is fired multiple components deep?

Amit Chawla Over a year ago

Yes. You just need to keep passing the function down as prop. You can keep pasing function as deep you want. For example : suppose you have your handler defined in root. Then nested components can call it as shown. (Suppose "component" has an embedded element "component1child") <component1 handler=this.handler/> then in <component1child handler=this.props.handler ></component1child> just keep passing how many levels you want to pass down.

ronnie burns Over a year ago

that works great! thanks Amit. In the future I will implement Redux, but for right now this helps me achieve what I am after.

Mike Kor · Accepted Answer · 2017-09-10 09:35:11Z

0

You can try to make global function and call it wherever you want.

showVideoPopup () {
    ReactDOM.render(
        <VideoPopup />,
        document.getElementById('popupHolder')
    );
}

answered Sep 10, 2017 at 9:35

Mike Kor

8765 silver badges14 bronze badges

Collectives™ on Stack Overflow

react js trigger function from any other component

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related