Hi Campers! Recently I’m working on this project of a music player and I have a Class Component “MuscicPlayer”, which has a render method like this:
render() {
let nowPlayingSong = this.state.songList.getSongAtIndex(this.state.nowPlayingSongIndex);
let nowPlayingSongURL = nowPlayingSong.songURL;
let nowPlayingSongAlbumArt = nowPlayingSong.songAlbumArtLink;
let nowPlayingSongTitle = nowPlayingSong.songTitle;
let nowPlayingSongAuthor = nowPlayingSong.songAuthor;
if (this.state.isShowingNowPlayingBoard === true)
return (
<div id="music-player">
<SongInfo
albumArt={nowPlayingSongAlbumArt}
songTitle={nowPlayingSongTitle}
songAuthor={nowPlayingSongAuthor}
currentTime={this.convertSecondToMinute(this.state.currentTime)}
duration={this.convertSecondToMinute(this.state.nowPlayingSongDuration)} />;
<audio
src={nowPlayingSongURL}
id="audio">
</audio>
<Scrubber percent={this.state.percent} />
<ControlPanel
handlePlayPause={this.handlePlayPause}
handleNext={this.handleNext}
handlePrevious={this.handlePrevious}
handleShuffle={this.handleShuffle}
handleToggleNowPlayingBoard={this.handleToggleNowPlayingBoard} />
<NowPlayingBoard
songList={this.state.songList.songList}
toggleShowing={this.handleToggleNowPlayingBoard}
removeSong={this.handleRemoveSong}
isPause={this.state.isPause} />
</div>
);
else return (
<div id="music-player">
<SongInfo
albumArt={nowPlayingSongAlbumArt}
songTitle={nowPlayingSongTitle}
songAuthor={nowPlayingSongAuthor}
currentTime={this.convertSecondToMinute(this.state.currentTime)}
duration={this.convertSecondToMinute(this.state.nowPlayingSongDuration)} />
<audio
src={nowPlayingSongURL}
id="audio">
</audio>
<Scrubber percent={this.state.percent} />
<ControlPanel
handlePlayPause={this.handlePlayPause}
handleNext={this.handleNext}
handlePrevious={this.handlePrevious}
handleShuffle={this.handleShuffle}
handleToggleNowPlayingBoard={this.handleToggleNowPlayingBoard}
isPause={this.state.isPause} />
</div>
);
}
As you can see, in the render method, I have an if-else statement and inside I have some functional components. But the problem is the duplication in my code, I have tried assign the duplicated components to variables before the return
statement and reuse them inside the return
but It just doesn’t work, this is how I tried:
render() {
let nowPlayingSong = this.state.songList.getSongAtIndex(this.state.nowPlayingSongIndex);
let nowPlayingSongURL = nowPlayingSong.songURL;
let nowPlayingSongAlbumArt = nowPlayingSong.songAlbumArtLink;
let nowPlayingSongTitle = nowPlayingSong.songTitle;
let nowPlayingSongAuthor = nowPlayingSong.songAuthor;
**let songInfo = <SongInfo **
** albumArt={nowPlayingSongAlbumArt}**
** songTitle={nowPlayingSongTitle}**
** songAuthor={nowPlayingSongAuthor}**
** currentTime={this.convertSecondToMinute(this.state.currentTime)}**
** duration={this.convertSecondToMinute(this.state.nowPlayingSongDuration)} />;**
** let controlPanel = <ControlPanel **
** handlePlayPause={this.handlePlayPause}**
** handleNext={this.handleNext}**
** handlePrevious={this.handlePrevious}**
** handleShuffle={this.handleShuffle}**
** handleToggleNowPlayingBoard={this.handleToggleNowPlayingBoard} />;**
if (this.state.isShowingNowPlayingBoard === true)
return (
<div id="music-player">
**{songInfo}**
<audio
src={nowPlayingSongURL}
id="audio">
</audio>
<Scrubber percent={this.state.percent} />
**{controlPanel}**
<NowPlayingBoard
songList={this.state.songList.songList}
toggleShowing={this.handleToggleNowPlayingBoard}
removeSong={this.handleRemoveSong}
isPause={this.state.isPause} />
</div>
);
else return (
<div id="music-player">
**{songInfo}**
<audio
src={nowPlayingSongURL}
id="audio">
</audio>
<Scrubber percent={this.state.percent} />
**{controlPanel}**
</div>
);
}
Could you show me the way to refactor my code so that it would be less duplicated? Thank you very much?