javascript - Having trouble building a simple audio player in React using HTML5 -

i've started learning react , i'm trying build simple audio player. i'm using example reference it's built in 1 file

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

the 1 i'm trying make done in "react" way ui has reusable components i'm having trouble separating code meaningful , working components. example, if try move of rendering code parent component (audioplayer) (playbutton), audio methods created on mounting of parent component becomes inaccessible child components.

here code repo.

https://github.com/vincentchin/reactmusicplayer

it works i'd improve it. it'd great if can point out huge flaws in since i'm sure i've broken rules or standards coding in react.

you can access parent component's methods child component passing method prop, , invoking inside child component.

for example (in child component's render method):

<button onclick={this.props.methodfromtheparent}>click me</button> 

you can pass arguments these methods:

<button onclick={this.props.methodfromtheparent.bind(null, 'hello')}>click me</button> 

remember pass in null instead of this first argument when binding values method belonging parent component.

i skimmed through repo well. clean audioplayer component lot putting different elements own components.

the render method 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 inside newly-created player component:

render() {   var pstate = this.props.playerstate; // make 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 layout many nested components needed , makes sense.

remember add onclick attribute inside child components (<button onclick={this.props.onclick}>play</button>).