learn-co-curriculum / react-props-lab

React Props lab

Overview

In this lab, you'll define components with default props and you'll also override default props with your own prop values.

Star Wars

Let's say we're a spaceship captain going to a local Star Wars meetup. Since we want to showcase the awesome ships people are commandeering, we need to represent them somehow. That's where you come in! You'll be creating a React component that shows us some info on a given spaceship.

1. In the components/Spaceship.js file, create a Spaceship React component
2. This component has several props:
   1. name (string)
   2. speed (number, defaults to slow)
   3. hasRockets (boolean, defaults to false)
   4. colors (array of strings, defaults to ['black', 'red'])

Feel free to render out the data in any form you wish!

Note: you'll need to export the Spaceship component, like this:

export default class Spaceship extends React.Component { ... };
// OR declare your component first, and then:
export default Spaceship;

Resources

• Default Props

react-props-lab's Issues

Ambiguous type definition for speed specification.

Under bullet point 2, it states:

speed (number, defaults to slow)

Given that the type has been specified for other properties of Spaceship and given that the link below references Type Checking, this speed should be either a number as initially defined or a string as later defined.

Issues with passing tests and solution

Solution isn't working.

First, this and the past few lessons have been referencing the following script tag in index.html

<script src="bundle.js"></script>

No such file exists in any lab thus far.

Second, it doesn't seem that the challenge requires us to tamper with index.js but the script tag referencing this file is missing from index.html. Not a problem though. However once I add that script tag, I can't escape an error in index.js...
Uncaught SyntaxError: Unexpected token < from line 7 in index.js

Lastly, I could be wrong, but shouldn't Spaceship.js be Spaceship.jsx?

So yea... even after cloning, switching to the solution branch, and adding the missing script tag for index.js, nothing is rendering.

" Speed - should be a number, defaults to 'slow' "

I understand that React is not validating that we are using the correct datatype in our props for any given category, but saying that the 'speed' value should be a number but default to a string is very confusing.

Saying it should be a number seems completely arbitrary since it has no bearing on how I am writing my code. Please update this to either be a string to begin with, or change the default to a number value.

The readme before does not help whatsoever to complete this lab

The readme before does not help at all in completing this lab.
I can see why the mod ahead of us was angry and upset on the quality of these labs. We need one or 2 more read me's to understand what is going on.
I checked the solution branch and saw you added const after the render?
When was that presented or explained?
For the lab before, some clarification or additional design patterns should be provided.
Better explanations should be presented before trying to complete this lab.

Issue when running Learn

I get the following when I run learn.

/usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/strategies/mocha.rb:42:in `results': undefined method `[]' for nil:NilClass (NoMethodError)
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/reporter.rb:47:in `report'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/reporter.rb:13:in `report'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/runner.rb:44:in `report_and_clean'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/runner.rb:21:in `block in run'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/runner.rb:20:in `fork'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/runner.rb:20:in `run'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/bin/learn-test:68:in `<top (required)>'
        from /usr/local/rvm/gems/ruby-2.3.1/bin/learn-test:23:in `load'
        from /usr/local/rvm/gems/ruby-2.3.1/bin/learn-test:23:in `<main>'

export default duplicated

export default is duplicated in before the class is defined and after when the export is needed for the module. Got the error that only one export default is allowed. It may be a duplicate in the README.md

Exporting the component

In the instructions it says to use:

export default Spaceship;

However, that is not allowing the tests to pass. I had to do:

module.exports = Spaceship

After I changed it all the tests passed.

"Default Props" link is moved/broken

The "Default Props" link should probably lead to https://facebook.github.io/react/docs/typechecking-with-proptypes.html#default-prop-values since the current URL (https://facebook.github.io/react/docs/reusable-components.html#default-prop-values) actually redirects to https://facebook.github.io/react/docs/components-and-props.html (which does not mention default props at all).