React Dynamic Components

• .props
• Example 1
• Example 2 - Passing in .props
• Default Values

.props

One more thing about props: they can be any data type! In our example, we pass a string as a prop. But we can pass a number, boolean, object, function, etc.

class BlogContent extends React.Component {
  render() {
    return (
      <div>
        {this.props.articleText}
      </div>  
    )
  }
}

class Comment extends React.Component {
  render() {
    return (
      <div>
        {this.props.commentText}
      </div>
    )
  }
}


class BlogPost extends React.Component {
  render() {
    return (
      <div>
        <BlogContent articleText={"Dear Reader: Bjarne Stroustrup has the perfect lecture oration."}/>
        <Comment commentText={"I agree with this statement. - Angela Merkel"}/>
        <Comment commentText={"A universal truth. - Noam Chomsky"}/>
        <Comment commentText={"Truth is singular. Its ‘versions’ are mistruths. - Sonmi-451"}/>
      </div>
    )
  }
}

Dynamic components are a core facet of React programming, and most of what we do as React programmers builds upon them.

results:

<div>
x
  <div>
    Dear Reader: Bjarne Stroustrup has the perfect lecture oration.
  </div>

  <div>
    I agree with this statement. - Angela Merkel
  </div>

  <div>
    A universal truth. - Noam Chomsky
  </div>

  <div>
    Truth is singular. Its ‘versions’ are mistruths - Sonmi-451
  </div>

</div>

Example

up

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));


//App.js
import React, { Component } from 'react';
import BlogPost from './BlogPost.js'
import ColorBox from './ColorBox.js'

class App extends Component {
  
  render() {
    return (
      <div id="app">
          <BlogPost />
          <div id="seperator"></div>
          <div className="wrapper">
            <ColorBox opacity={1} />
          </div>
      </div>
    )
  }
}

export default App;


//BlogPost.js
import React, { Component } from 'react';
import Comment from './Comment'

export default class BlogPost extends Component {
  render() {
    
    const comments = [
      "When we speak we are afraid.. - Audrey Lorde", 
      "I am no longer accepting... - Angela Davis",
      "If you don't understand, ask ... - Chimamanda Ngozi Adichie"
    ]
    
    return (
      <div id="blog-post" className="wrapper">
        Just like moons and like suns,<br/>
        With the certainty of tides...<br/>
        -Maya Angelou<br/>

        
        <Comment commentText={comments[0]} />
        <Comment commentText={comments[1]} />
        <Comment commentText={comments[2]} />
        
      </div>
    );
  }
}


//Comment.js
import React, { Component } from 'react';

export default class Comment extends Component {

  render() {
    return (
      <div className='comment'>
        {this.props.commentText}
      </div>
    )
  }

}


//ColorBox.js
import React, { Component } from 'react';

export default class ColorBox extends Component {

  state = {
    todos: [
      
    ]
  }

  render() {
    return (
      <div className="color-box" style={{opacity: this.props.opacity}}>
        {this.props.opacity >= 0.2 ? <ColorBox opacity={this.props.opacity - 0.1} /> : null}
      </div>
    )
  }

}

Example 2 - Passing in .props

up

const title = "Mad Max"
const posterURL = "http://image.tmdb.org/t/p/w342/kqjL17yufvn9OVLyXYpvtyrFfak.jpg"
const genresArr = ["Action", "Adventure", "Science Fiction", "Thriller"]

<MovieCard title={title} posterSrc={posterURL} genres={genresArr} />

class MovieCard extends React.Component {
  render() {
    return (
      <div className="movie-card">
        <img src={this.props.posterSrc} alt={this.props.title} />
        <h2>{this.props.title}</h2>
        <small>{this.props.genres.join(', ')}</small>
      </div>
    )
  }
}

Default Values

up

class MovieCard extends React.Component {
  render() {
    return (
      <div className="movie-card">
        <img src={this.props.posterSrc} alt={this.props.title} />
        <h2>{this.props.title}</h2>
        <small>{this.props.genres.join(', ')}</small>
      </div>
    )
  }
}

MovieCard.defaultProps = {
  posterSrc: 'http://i.imgur.com/bJw8ndW.png'
}

Now, whenever we omit the posterSrc prop, or if it's undefined, the MovieCard component will use this default prop instead. This is more ideal than dealing with missing data say for instance in the parent component. We isolate responsibilities, the code is more organised.