Stateless And Stateless Functional Components

See https://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components

If it just has a render() method then use Stateless Functional Component. All Stateless Components do is just return UI.

**In React it's good practice to separate your component out into

1. Container Component (ie. parent class with methods) . Wrapper.
2. Lots of Presentational Components (ie. Stateless Functional Component). The micro components that are contained with the Container Component.**

See: https://learn.tylermcginnis.com/courses/50507/lectures/762584

Stateless Components

/*
All the code does is it receives an array of repositories of a specific user, maps over those repositories, and displays them to the view.
1. Not using a constructor to initialise state property, 
2. Each property receiving data via props
3. Now if we just a render() method use Stateless Functional Component instead below
*/
 
class Repos extends React.Component {
  render(){
    return (
      <div>
        <h3> User Repos </h3>
        <ul className="list-group">
          {this.props.repos.map((repo, index) => {
            return (
              <li className="list-group-item" key={repo.name}>
                <h4><a href={repo.html_url}>{repo.name}</a></h4>
                <p>{repo.description}</p>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

Stateless Functional Components

/* Notice the cod is just a function (granted a fancy ES6 function but that’s besides the point).
    If your component has just a render method (and no state), you can simply create your component as a Stateless Functional Component and your function will be passed props as its first argument. 
 
    NOTE:  It's a good idea to try to use as many Stateless Functional Components as possible because then you have a good separation of presentational components vs other components. 
*/
 
const Repos = ({props}) => {
  return (
    <div>
      <h3> User Repos </h3>
      <ul className="list-group">
        {props.map((repo, index) => {
          return (
            <li className="list-group-item" key={repo.name}>
              <h4><a href={repo.html_url}>{repo.name}</a></h4>
              <p>{repo.description}</p>
            </li>
          )
        })}
      </ul>
    </div>
  )
}
ReactDOM.render(<Repos />, document.getElementById('app'))
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License