functionComponent.js

// functional component with partial destructuring
const UserSection = ({ user, isActive }) => (
  <div>
    <p>{user.name}</p> <span> {isActive ? 'active' : 'offline'} </span>
  </div>
);

// functional component with no destructuring
const UserSection = props => (
  <div>
    <p>{props.user.name}</p> <span> {props.isActive ? 'active' : 'offline'} </span>
  </div>
);