Having trouble building a simple audio player in React using HTML5

Question

I've recently started learning React and I'm trying to build a simple audio player. I'm currently using this example as a reference but it's built in one file

https://github.com/CezarLuiz0/react-cl-audio-player

The one I'm trying to make is done in a "React" way where the UI has reusable components but I'm having trouble separating my code into meaningful and working components. For example, if I try to move some of the rendering code from the parent component (AudioPlayer) into (PlayButton), the audio methods that is created on the mounting of the parent component suddenly becomes inaccessible to the child components.

Here is my code repo.

https://github.com/vincentchin/reactmusicplayer

It works now but I'd like to improve it. Also it'd be great if someone can point out huge flaws in this since I'm sure I've broken some rules or standards to coding in React.

Answer 1

You can access parent component's methods from a child component by passing the method as a prop, and then invoking it inside the child component.

For example (in the child component's render method):

<button onClick={this.props.methodFromTheParent}>Click me</button>

You can also pass arguments to these methods:

<button onClick={this.props.methodFromTheParent.bind(null, 'Hello')}>Click me</button>

Remember to pass in null instead of this as the first argument when binding values to a method belonging to a parent component.

I skimmed through your repo as well. You could clean up the AudioPlayer component a lot by putting the different elements into their own components.

The render method could look something like this:

render() {
    return (
      <div>
          <PlayButton onClick={this.togglePlay} playing={this.state.playing} />
          {!this.state.hidePlayer ?
          (<Player
             playerState={this.state}
             togglePlay={this.togglePlay}
             setProgress={this.setProgress}
             ...
          />) : null}
      </div>
    );
  }

And then inside the newly-created Player component:

render() {
  var pState = this.props.playerState; // Just to make this more readable
  return (
    <div className="player">
      <PlayButton onClick={this.props.togglePlay} playing={pState.playing} />
      <Timeline
        currentTimeDisplay={pState.currentTimeDisplay}
        setProgress={this.props.setProgress}
        progress={pState.progress}
        ...
      />
      <VolumeContainer
        onMouseLeave={this.props.noShow}
        setVolume={this.setVolume}
        toggleMute={this.toggleMute}
        ...
      />
    </div>
  );
}

You can break the layout into as many nested components as is needed and makes sense.

Remember to actually add the onClick attribute inside the child components as well ( <button onClick={this.props.onClick}>Play</button> ).