Because JSX is "Just JavaScript"™ there is no special template syntax for looping nor conditionals. We can use JavaScript to convert an array of data into an array of components and include them in JSX. Similarly we can use JavaScript to conditional render a component.
🏅 The goal of this step is to learn how to do logic within JSX.
Help! I didn't finish the previous step! 🚨
If you didn't successfully complete the previous step, that's okay! The steps are meant to push you. 😄
However, you may find yourself in a position where you app is not compiling, and it's preventing you from working on this step. No problem! Stash your changes in a new terminal window, and you should be good to continue:
git stash push -m "In-progress Step 3 exercises"Your app should automatically reset and you should be able to continue on with the current step.
- Rendering dynamic lists of data
- Handling special
keyprop - Conditionally rendering components
In App.js, map over the results state and render a <Result> for each item.
NOTE: Don't forget the
keyprop on the<Result>components
Also, only render the entire results container <div> when there are results.
(If at any point you get stuck, you can take a peek at the answers)
After you're done with the exercise and before jumping to the next step, please fill out the elaboration & feedback form. It will help seal in what you've learned.
Add a <select> element to the SearchForm to change the number of Giphy images displayed.
- Declare a
const LIMITS = ['6', '12', '18', '24', '30']constant and map over it to generate the<option value={limit}>elements within the<select> - Add an
initialLimitprop toGiphySearchand set it to 12 - The
getResultsAPI call takes a property calledlimitto control the number of results returned
Go to the End.