title: ReactJS - Calling a components method from another component?
body: <p>Is it possible to call a method on another component?</p>
  
  <p>I have created that needs to be toggled either on click, or when a certain event happens.</p>
  
  <p>For example I've created a React component that functions as a play button on a media player. I use LottieJS and bodymovin to animate the SVG button. If the song is playing the button shows a pause symbol. If the song is stopped it shows a play symbol.</p>
  
  <p>Here's my <code>PlayButton</code> component ...</p>
  
  <pre><code>import React from 'react';
  import Lottie from 'react-lottie';
  import PropTypes from 'prop-types';
  import styled from 'styled-components';
  import * as animationData from './button.json';
  
  const Button = styled.button`
      cursor: pointer;
      outline: none;
      border: none;
      background: none;
      display: block;
      float: left;
      width: 10%;
      margin-top: 27px;
  `;
  
  export default class PlayButton extends React.Component {
      static propTypes = {
          onClick: PropTypes.func.isRequired,
      }
  
      static defaultProps = {
          onClick: () =&gt; {}
      }
  
      state = {
          isStopped: true,
          direction: 1,
          speed: 3,
      }
  
      toggle = () =&gt; {
          const {isStopped, direction} = this.state;
          if (!isStopped) {
            this.setState({direction: direction * -1})
          }
          this.setState({isStopped: false});
          this.props.onclick();
      }
  
      render() {
          const defaultOptions = {
              loop: false,
              autoplay: false, 
              animationData: animationData,
              rendererSettings: {
                  preserveAspectRatio: 'xMidYMid slice',
              },
          };
  
          return (
              &lt;Button onClick={this.toggle}&gt;
                  &lt;Lottie 
                      options={defaultOptions}
                      isStopped={this.state.isStopped}
                      speed={this.state.speed}
                      direction={this.state.direction}
                  /&gt;
              &lt;/Button&gt;
          )
      }
  }
  </code></pre>
  
  <p>I render like so:</p>
  
  <pre><code>&lt;PlayButton onclick={this.playButtonClicked} /&gt;
  </code></pre>
  
  <p>When the button is clicked it will toggle the SVG animation using LottieJS.</p>
  
  <p>I need to call <code>toggle</code> so that when the track has reached the end the play button will toggle from playing, to stopped. Is this possible at all?</p>
  
  <p>Normally I wouldn't have this problem if I was using non animated SVG's. I would just display a CSS <code>background-image</code> depending on the state. But because this is a toggle animation I'm not sure how to go about this.</p>