React Dynamic Components Lab

Objectives

  • Practice writing dynamic components
  • Practice jumping into existing code and making the necessary changes

Introduction

In this lab, you'll write React components and render them dynamically based on information they receive from their parent components. This will enable us to use components as templates with the ability to render variable content.

There are two discrete parts of this lab, and they should be tackled one after the other. We will need to first create a Comment component from scratch and then add a few things to the ColorBox component.

All of the css has been provided, as well as a good amount of starter code. The general structure has already been provided - you are to pick up where the code leaves off and make both the Comment and the ColorBox components behave dynamically.

Here is an image of what we want once we are finished, complete with a view of the rendered DOM tree on the right:

...and here is a tree view of our component parent-child structure:

└── App
    ├── BlogPost
    │   ├── Comment
    │   ├── Comment
    │   └── Comment
    │
    └── ColorBox
        └── ColorBox
            └── ColorBox
                └── ColorBox (etc.)

Go ahead and npm start to see what we already have rendering in the browser.

Deliverables

(The application will error on npm start until the Comment component is created and exported)

Comment Component

  • create a new file, Comment.js within src/ and don't forget to:
    • import React, { Component } from 'react' at the top of our file
    • Use the class X extends Component {} syntax
    • export the class so it can be used in other files
    • import the class in BlogPost
  • it should expect a single prop (the text of a comment), which can be used in the component via: this.props.commentText. This prop is passed in src/BlogPost.js
  • it should have a single <div> in its render() method
  • the <div> should have a className="comment" attribute
  • Note: The BlogPost component needs minor alteration to properly pass the contents of its commentsArray to each of the Comment components that it is rendering
  • Don't forget - we can unpack variable values directly with JSX by wrapping them in {}, i.e. {this.props.commentText}

Take a Break

  • Look at something other than your computer screen for at least five minutes

ColorBox Component

  • should expect a single prop (an opacity value), which can be used in the component via: this.props.opacity. This prop is first passed in src/App.js
  • if the opacity value is greater than or equal to 0.2:
    • the ColorBox component should render another ColorBox itself (recursive components!)
    • an opacity prop should be passed to the child
    • the passed opacity prop should be reduced by 0.1
  • if the opacity value is less than 0.2:
    • do not render another ColorBox (or else we would have infinite ColorBoxes rendering!)
    • instead, render null
Hint on ColorBox
  • Watch out for endless recursion! If your ColorBox component has no break condition to stop it from always rendering another ColorBox, your browser will likely become non-responsive. pre-plan how you are going to render the ColorBox before trying to code it.
  • You may find that subtracting 0.1 from your opacity prop is leading to some strange precision errors (try logging the opacity prop with each render). This is due to limitations with JavaScript float (number) types.
  • in order to render based on a conditional, you can write JavaScript logic directly in the render() block. For example:
class Example extends Component {
    render() {
        const newValue = this.props.value * 2;

        if (this.props.value < 100) {
            return (
                <div>
                    <Example value={newValue} />
                </div>
            );
        } else {
            return null;
        }
    }
}

Resources

View Dynamic Components Lab on Learn.co and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us