title: React: Play, pause onclick fuctionality
body: <p>I am trying to implement play/pause on button clicking. While icons change perfectly, my actual functionality fails to work. My code is the following.</p>
  
  <p>Function that is triggered on click</p>
  
  <pre><code>onPlayHandler = () =&gt; {
          let aud = new Audio(this.props.data[this.state.index].audio);
          aud.play();
          this.setState({
              isPlaying: true
          });
      };
  
      onPauseHandler = () =&gt; {
          let aud = new Audio(this.props.data[this.state.index].audio);
          aud.pause()
          //aud.setAttribute("ref", `${this.myRef}`);
          this.setState({
              isPlaying: false
          });
          //this.refs.audio.pause(); 
          //x.pause(); 
          //console.log(aud)
      };
  </code></pre>
  
  <p>Button that is clicked</p>
  
  <pre><code>&lt;Button playAudio={ this.state.isPlaying ? this.onPauseHandler : this.onPlayHandler } isPlaying={ this.state.isPlaying } /&gt;
  </code></pre>
  
  <p>Button component</p>
  
  <pre><code>export default function IconLabelButtons(props) {
      const classes = useStyles();
  
      return (
          &lt;&gt;
              &lt;Button
                  variant="contained"
                  color="primary"
                  size="large"
                  className={ classes.button }
                  startIcon={ props.isPlaying ? &lt;PauseIcon /&gt; : &lt;PlayArrowIcon /&gt; }
                  onClick={ props.playAudio }
              &gt;
                  { props.isPlaying ? 'Pause' : 'Play' }
              &lt;/Button&gt;
          &lt;/&gt;
      );
  </code></pre>
  
  <p>Updated question
  Entire code</p>
  
  <pre><code>import React, { Component } from 'react';
  import Card from './Card';
  import Button from './Button';
  import correct from '../../data/media/correct.wav';
  import denied from '../../data/media/denied.mp3';
  var _ = require('lodash');
  
  
  class AudioContainer extends Component {
      constructor (props) {
          super(props);
          this.state = {
              images: [],
              index: 0,
              checkedItems: new Map(),
              correct: false,
              isPlaying: false
          };
          this.audio = React.createRef();
      }
  
      componentDidMount() {
  
          const arrImages = this.props.data.map((item) =&gt; {
              let arr = [];
              arr.push(item.picture);
              return arr;
          });
  
          //console.log(arrImages)
          this.setState({
              images: _.shuffle(arrImages.flat(Infinity))
          });
      }
  
      showImages = () =&gt; {
          this.state.images &amp;&amp; this.state.images.map((image) =&gt; (
              &lt;div&gt;
                  &lt;figure class="image is-128x128"&gt;
                      &lt;img src={ image.src } alt="" /&gt;
                  &lt;/figure&gt;
                  &lt;span&gt;{ image.name }&lt;/span&gt;
              &lt;/div&gt;
          ));
      };
  
      handleChange = (e) =&gt; {
          const item = e.target.name;
          const isChecked = e.target.checked;
          this.setState(prevState =&gt; ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
      };
  
      onCheckHandler = (e) =&gt; {
          e.preventDefault();
          /* function checkTrue(item) {
              return item.value === true;
          }
          const filteredItems = this.state.checkedItems.filter(checkTrue) */
          //console.log(this.state.checkedItems.value())
          let arr = [];
          // eslint-disable-next-line no-unused-vars
          for (let [key, value] of this.state.checkedItems) {
              let obj = {
                  value: key,
                  bool: value
              };
              arr.push(obj);
          }
  
          //console.log(arr);
          let filteredArr = arr.filter((el) =&gt; {
              return el.bool === true;
          });
          //console.log(filteredArr);
          let arrWithAnswers = [];
          filteredArr.map((el) =&gt; {
              return arrWithAnswers.push(el.value);
          });
          //console.log(arrWithAnswers);
          //console.log(this.props.data[this.state.index].answers.sort());
          if (_.isEqual(arrWithAnswers.sort(), this.props.data[this.state.index].answers.sort())) {
              let sound = new Audio(correct);
              sound.play();
              this.setState({
                  index: this.state.index + 1, checkedItems: new Map()
              });
              //console.log("true");
          } else {
              let sound = new Audio(denied);
              sound.play();
          }
      };
  
      update() {
          const arrImages = this.props.data.map((item) =&gt; {
              let arr = [];
              arr.push(item.picture);
              return arr;
          });
  
          //console.log(arrImages)
          this.setState({
              images: _.shuffle(arrImages.flat(Infinity))
          });
      }
  
      onPlayHandler = () =&gt; {
          let aud = new Audio(this.props.data[this.state.index].audio);
          aud.play();
          this.setState({
              isPlaying: true
          });
      };
  
      onPauseHandler = () =&gt; {
          let aud = new Audio(this.props.data[this.state.index].audio);
          aud.pause()
          //aud.setAttribute("ref", `${this.myRef}`);
          this.setState({
              isPlaying: false
          });
          //this.refs.audio.pause(); 
          //x.pause(); 
          //console.log(aud)
      };
  
      render() {
          //console.log(this.props.data)
          //console.log(this.state.images)
          //console.log(this.state.checkedItems.size);
          return (
              &lt;div&gt;
                  &lt;Button playAudio={ this.state.isPlaying ? this.onPauseHandler : this.onPlayHandler } isPlaying={ this.state.isPlaying } /&gt;
                  &lt;div className="columns is-vcentered is-multiline"&gt;
                      { this.state.images &amp;&amp; this.state.images.map((image, index) =&gt; (
                          &lt;div className="column is-3" key={index}&gt;
                              &lt;Card image={ image.src } clickHandler={ this.handleChange } name={ image.name } /&gt;
                          &lt;/div&gt;
                      )) }
                  &lt;/div&gt;
  
                  &lt;button className="button is-info" disabled={ this.state.checkedItems.size &lt;= 0 } onClick={ this.onCheckHandler }&gt;Check&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default AudioContainer;
  </code></pre>
  
  <p>Your help is appreciated, thanks.</p>