With this lab we'll get a chance to practice looping through arrays in a React.

We'll be using JavaScript's fancy array methods. These give us a lot of power to manipulate data in arrays and can be a lot of fun once you get the hang of it!

You'll mainly be using these three for today's exercise.

• Map method
• Filter method
• Find method

Other use array iterator methods

• For Each
• Reduce
• Includes
• Every

To set up the activity

• Clone down this repo to your local machine.
• Once cloned down cd into this repo with cd array-methods-react.
• Run npm install to install all the necessary packages.
• Run npm start to start of the app in the browser.

Take a look at the ./src/planetData.js file. The file contains an array of planet data.

Take a look at App.js. At the top of the file we're pulling in planetData. We'll be rendering this data in our App component. Familiarize yourself with the App component's render() method and the renderPlanets() method.

At the moment the App component is set up to render an array of <p> tags, one for each planet in the planetData array.

We've solved the first challenge for you as an example.

When ready, go ahead and comment out the renderPlanets() function for Challenge #1 and uncomment the function for Challenge #2.

Each challenge will have you display a different set of data to the page. For each challenge write some code using one of the JavaScript array iterator methods to return some JSX and display the desired output to the page.

Do your best to work through each challenge. If you've been stuck on any particular challenge for more than 20 minutes take a peek at the solution found in the solutions.md file.