Stateless components vs functional stateless components vs functional components

different-components.js

//Stateless components

import React, {Components} from 'react';
class Repos extends 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>
    )
  }
}

//The repo component will receive an array of repos of specific users, maps over
//those repositories and displays to the view


//Stateless functional components
const Repos = (props) => {
  return(
    <div>
      <h3> User Repos </h3>
      <ul className="list-group">
        {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 is a function with props being passed as your first
//argument


//Functional components
const RepoWithState = () =>{
  //future functional components will have their own state
}