Code Monkey home page Code Monkey logo

react-initial-state-lab's Introduction

React Initial State Lab


In this lab, you'll set initial state in a React component and distinguish between state and props.


Follow the steps below and create two components, ImageSlider and Bomb. Currently, Bomb.js and ImageSlider.js don't contain any code, so if you run learn or npm start, you'll get an error. This is because our tests are trying to import and use these components before they've been written.

So, before we continue, your first task is to create a simple components for both ImageSlider and Bomb:

  • In the src/ImageSlider.js file, create an ImageSlider React component.
  • In the src/Bomb.js file, create a Bomb React component.

These components will need a valid render method to allow for our tests to properly import and use them. Now, if you've created valid components, you should be able to run learn to see the test results and run npm start to start the app.

Image slider

Let's pretend we're making an awesome slider for our new portfolio site. Naturally, we'll use React to do so! We have to start somewhere, so in this lab we'll just focus on setting up the initial state of the slider.

  1. Its initial state should have a property called currentSlideIndex that starts at 0.
  2. It should only render out the text 'I am on slide <CURRENT_SLIDE>', where <CURRENT_SLIDE> is the value of this.state.currentSlideIndex.

A bomb timer

Take a moment to think about what a bomb does and how it works. Don't get all into the nitty gritty โ€” what we're going to focus on right now is the timer.

Let's create a component that represents a bomb timer that counts down until it reaches 0. However, the only thing we're going to focus on right now is setting the initial state of the bomb: the amount of seconds left on the timer. Since bomb timers can differ, we'll pass in a prop to our Bomb component to determine what the starting count should be.

  1. The initial state of Bomb should have a property called secondsLeft.

  2. The initial value of secondsLeft should be equal to the initialCount prop of our Bomb component.

    We'll need to learn how to set an intial state based off that component's props. React passes a component's props as an argument into the constructor (i.e., constructor(props)). Remember to call super() on the first line of the constructor (this is required in React components if we are to use this in the constructor). Ultimately, our constructor should look something like this:

    constructor(props) { //props that the component gets from its parent
      this.state = { //define initial state with a key of 'someKey' set to the 'someValue' prop
        someKey: props.someValue
  3. As an extra step for understanding, you can open in the index.js file to see how we are passing the initialCount prop to Bomb

  4. It should render the text '<SECONDS_LEFT> seconds left before I go boom!', where <SECONDS_LEFT> is the value of secondsLeft.

  5. If secondsLeft equals 0, it should render 'Boom!' instead.


react-initial-state-lab's People


annjohn avatar aturkewi avatar danielseehausen avatar dependabot[bot] avatar enoch2k2 avatar gj avatar ihollander avatar jremes-foss avatar kjleitz avatar lizbur10 avatar lukeghenco avatar maxwellbenton avatar nikymorg avatar pletcher avatar rrcobb avatar thomastuts avatar thuyanduong-flatiron avatar


 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-initial-state-lab's Issues

Contradicting usages

In the previous lesson we learned:

While this is all perfectly valid React code, storing computed values in your state (in this case, fullAddress) should be avoided. There's no good reason for the full address to go into our state, since we're just using props to 'compute' the full address. Instead, we should use the component's props directly

But in this lab you are asking us to do precisely the opposite.

` constructor(props) {

this.state = {
  secondsLeft: props.initialCount


Furthermore, the application of this code is confusing.

I feel there are many gaps in the React curriculum, making it very hard to learn!

Hope the React curriculum can be updated, it's vague and it assumes we know a lot of basic concepts that the curriculum hasn't properly explained.

Ran learn got mocha error

received error:

11: from /Users/alexsilver/.rvm/gems/ruby-2.6.1/bin/ruby_executable_hooks:24:in <main>' 10: from /Users/alexsilver/.rvm/gems/ruby-2.6.1/bin/ruby_executable_hooks:24:in eval'
9: from /Users/alexsilver/.rvm/gems/ruby-2.6.1/bin/learn-test:23:in <main>' 8: from /Users/alexsilver/.rvm/gems/ruby-2.6.1/bin/learn-test:23:in load'
7: from /Users/alexsilver/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/bin/learn-test:68:in <top (required)>' 6: from /Users/alexsilver/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:20:in run'
5: from /Users/alexsilver/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:20:in fork' 4: from /Users/alexsilver/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:21:in block in run'
3: from /Users/alexsilver/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:44:in report_and_clean' 2: from /Users/alexsilver/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/reporter.rb:13:in report'
1: from /Users/alexsilver/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/reporter.rb:47:in report' /Users/alexsilver/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/strategies/mocha.rb:42:in results': undefined method `[]' for nil:NilClass (NoMethodError)

Not sure if me or files

Typo on test: currentSlideIndex should be secondsLeft

line 24 of index-test.js:

describe('<Bomb />', function () {
  const wrapper = shallow(<Bomb initialCount={120} />);

  it('should set the `currentSlideIndex` to the value of the `initialCount` prop', function () {

should be:

describe('<Bomb />', function () {
  const wrapper = shallow(<Bomb initialCount={120} />);

  it('should set the `secondsLeft` to the value of the `initialCount` prop', function () {

Cannot Run Learn Tests

All tests are passing, but freeze and never submit the passing of Local Tests on learn. Doesn't allow us to move forward with other lessons via learn open.

No Test Files Found, Cannot Run Learn Tests

Could not run learn tests
Error terminal output: `Warning: Could not find any test files matching pattern: test
No test files found

No test files found
user@user-MacBook-Pro react-initial-state-lab-dc-web-091619 % Traceback (most recent call last):

9: from /Users/username/.rvm/gems/ruby-2.6.1/bin/learn-test:23:in `<main>'
     8: from /Users/username/.rvm/gems/ruby-2.6.1/bin/learn-test:23:in `load'
     7: from /Users/username/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/bin/learn-test:68:in `<top (required)>'
     6: from /Users/username/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:20:in `run'
     5: from /Users/username/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:20:in `fork'
     4: from /Users/username/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:21:in `block in run'
     3: from /Users/username/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:44:in `report_and_clean'
     2: from /Users/username/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/reporter.rb:13:in `report'
     1: from /Users/username/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/reporter.rb:47:in `report'
/Users/username/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/strategies/mocha.rb:42:in `results': undefined method `[]' for nil:NilClass (NoMethodError)


Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.