learn-co-curriculum / react-passing-props-lab

React Passing Props Lab

Overview

In this lab, you'll pass props around and move state to the edge of the application.

The Flawed Fruit Basket

Fruit baskets are wonderful shimmering examples of the beauty of nature. But they also have a few design flaws. For one, it can sometimes be challenging to choose which fruit you want to eat. So much abundance! Where to start? Also, it can occur that you pick a fruit that is on the top of the fruit bowl, only to discover later that a more desirable fruit lay hidden below.

In this lab, we will work with an app that has solved this age-old problem. Because isn't that what technology is for? The application in question is a newfangled type of fruit basket that is able to filter its contents according to the type of fruit. Because it's futuristic — and everyone in the future is all science-y — our app will filter by scientific fruit categories like pome, pepo, and drupe. But the bottom line is that this app will help people get the fruit that they truly want!

The Task at Hand

Now, one thing that is a bit unusual about this lab is that rather than building the app from scratch, we will instead work with an application that has already been built. If you run npm start, you should see the product in all its glory.

Although this app is already working, its original implementation frankly leaves something to be desired. The application has too many components that are unnecessarily maintaining state. To drive this point home, take a look at this representation of the application's component hierarchy:

<App>
  <FruitBasket>
    <Filter />
    <FilteredFruitList />
  </FruitBasket>
</App>

As you can see our application consists of four components. That's fine, but what's shocking is that out of the four components, three are maintaining state! This is both unnecessary and a bad design choice, as state is largely unstable and tends to be buggier. Certainly, we can do better.

This is where we come in. Our task in this lab is to refactor this application so that state is maintained only at the top of the application in the App component. To do this we'll need to take advantage of what we've learned about the way props help us to push state to the edges of our application.

By the end of our refactoring process, the only component that should hold state is the Appcomponent. It should maintain all state and also handle the fetching of all the necessary data, which it will then pass down into the "dumb" presentational components below for rendering.

How to Approach This Lab

As this lab is an exercise in refactoring, what you'll need to do is determine the behavior of the lab by reading the code and examining the way the app functions currently. Once you've understood the current structure of the program, your goals are as follows:

• Move all state into the top-level App component.
• Use props to transfer the necessary data and callback functions down into the component hierarchy.
• Ensure that all the remaining components (FruitBasket, FilteredFruitList, and Filter) are stateless functional components that are strictly presentational.
• In the process of achieving this refactoring, do not change the UI or the way it functions.

As with other labs, we have provided a set of tests all of which must be passing when you have completed the lab. A few of the tests are passing already because after all the app is already working. Just make sure they continue to pass in your final product.

Resources

• Richard Feldman, "React 0.14: Why Local Component State is a Trap"
• Code Refatoring (Wikipedia): https://en.wikipedia.org/wiki/Code_refactoring

View Passing Props Lab on Learn.co and start learning to code for free.

react-passing-props-lab's Issues

Outdated webpack version. Update to 2.2 from 1.14

There is an issue with the extract-text-webpack-plugin on this lab causing weird issues:
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.

Iv'e found on Ununtu 17.10 to fix this I need change the following line in ./package.json
From:
"webpack": "^1.14.0",
To:
"webpack": "^2.2.0",

From what I can tell this does not cause additional issues.

Tests expecting unused props

Not clear why -
`21 passing (210ms)
2 failing

1. should have defaultProp "filters":
   AssertionError: expected { currentFilter: null, fruit: [] } to have key 'filters'

   • expected - actual
     [
   • "currentFilter"
   • "fruit"
   • "filters"
     ]
     at Context. (test/FruitBasket_test.js:33:50)

2. should have defaultProp "updateFilterCallback":
   AssertionError: expected { currentFilter: null, fruit: [] } to have key 'updateFilterCallback'

   • expected - actual
     [
   • "currentFilter"
   • "fruit"
   • "updateFilterCallback"
     ]
     at Context. (test/FruitBasket_test.js:43:50)
     `

package.json missing `bundle` script

Line 19 of the README includes the following step:

If you run npm run bundle and then load the index.html file, you'll see the product in all its glory.

However, no bundle script is included in the package.json in the master branch. There is one in the solution branch, but that package.json looks entirely different from the one in the master branch.

It seems that one of the following changes should be made:

• A bundle script should be added to the package.json in the master branch

OR

• If this lab is no longer using a bundle script, the sentence mentioning npm run bundle should be removed from the README in the master branch

Reported by @gloverab.

@aturkewi

Starter code uses ComponentWillMount, should be ComponentDidMount

Same as above

Doesn't Start

Lab says that it is already functioning right away but it is not. Has an unhanded error which causes the server to crash.

Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning. /Users/leahgarber/Development/code/react-passing-props-lab-v-000/fruit.js:38 return x.keywords.includes('fruit') && !x.keywords.includes('vegetable'); ^ TypeError: x.keywords.includes is not a function

Right after installing this lab via 'learn open' and typing 'learn' I get this error. The tests will not run because of it.

--Non urgent-- Filter non responsive when 'all' is reselected

(Please note that this issue is low priority and does not really affect lab functionality.)

The main functionality of this app consists of a filter to sort through categories of fruit.

Once a selection is made with the filter, and the default 'all' filter is reselected - no fruit are displayed as the app will only properly filter for fruit by category and 'all' is not one of those categories.

Tests pass without complete and working solution

You can get all the tests to pass without actually having a working application in the end. FruitBasket.js does not require that you actually return anything other than a div, so you can return an empty div and still pass the test.

As a side note, I think explicitly explaining how and what to set defaultProps based on expected data types would benefit students in the future. Currently I set defaultProp to just strings because I was unsure of what exactly to do with them, everything still passes the tests.