Getting the refs of the child component via event handler of the parent component

Getting the refs of the child component via event handler of the parent component
0

#1

Btw I’m using react and redux. What I’m planning to do is to execute playNow when click event happened on the parent element (i.e. div) then get the refs of the child component which is the audio and then play the sound. getElementById is not recommended in React that’s why I’m planning to use refs instead.

  playNow = () => {
    console.log(this.props.keyTrigger)
    // const sound  = document.getElementById;
   // const sound = this.refs.Q; 
   // sound.play(); 
  }

  render() {
    const padSet = this.props.power.powerStatus ?
      this.props.kit.drumKit.map((elem, index) => (
      <div key={elem.id} style={styles} onClick={this.playNow} >
        {elem.keyTrigger}
        <audio className="clip" ref={elem.keyTrigger} src={elem.url} />
      </div>
    ))
    :
      this.props.kit.drumKit.map((elem, index) => (
      <div key={elem.id} style={styles} onClick={this.playNow} >
        {elem.keyTrigger}
        <audio className="clip" ref={elem.keyTrigger} src='#' />
      </div>
    ));
    return (
      <div>
        {padSet} 
      </div>
    );
  }

#2

You do not need refs to play the audio on click of elements.


#3

Should I use id for it?