At this point I haven’t actually created anything for my app to render, but I will get there. First, I want to write two functions I know I will need later on:

  • a function to add a song from the catalog to the user’s playlist
  • a function to remove a song from the user’s playlist

Since playlistSongs is a piece of state that belongs to the MusicPlayer component, all functions that can change that state must also belong to the MusicPlayer component. I start with the function to remove a playlist song:

This function takes in one argument — the…


I am a full-stack web developer. It has been quite a journey to get here and I am very proud!

For the past 9 weeks, I have been a student at Flatiron School’s Full-Stack Software Engineering bootcamp, soaking up everything I can about how to build and deploy modern web applications.

After just four weeks of bootcamp, I was able to write my first web application completely on my own. It is a very simple app; I wrote it to reinforce the lessons I was learning about web buttons and forms. Looking back on it now, with five whole more…


Now I have my MusicPlayer app, with its two child container components, SongCatalog and YourPlaylist. The last component on my list is SongCard. SongCard is good example of reusable component — both the SongCatalog and YourPlaylist components will call on SongCard. However, how SongCard looks and behaves could be totally different depending on the container.

I think of SongCard as being like a template for a form letter. The basic template is always the same, but the data is different for each individual letter. …


In Parts 1 & 2, I created the top-level MusicPlayer component for a sample app that will demonstrate how to design basic playlist functionality.

MusicPlayer’s render function includes two child components: SongCatalog and YourPlaylist. Since both of these components will eventually contain SongCards, I think of them as “container components”. In this post, I will demonstrate how to set up each of these containers.

I will start with my SongCatalog container, which will have two functions

  • A function that takes in the allSongs array and generates a SongCard for each item
  • A function that returns a single HTML element, as…

When I was first learning React, I was impressed by the power and speed of the framework, but it took time for me to really grasp how the different components worked together. In particular, I struggled to understand how a single React component could have different behavior depending on its container.

In order to illustrate how reusable components work together in React, I have created a sample app for a music player that lets users create their own playlists. Over the course of three posts, I will use this app to demonstrate how to:

  • create a nested hierarchy of React…

Tara Harwood

Software Developer | Data Analyst | Work in Progress

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store