React - Example of a function component and a class component

index.js

import React from "react";
import ReactDOM from "react-dom";

const users = [
  { name: "Mary", age: 32, image: "https://randomuser.me/api/portraits/med/women/34.jpg"},
  { name: "John", age: 22, image: "https://randomuser.me/api/portraits/med/men/52.jpg"},
  { name: "Joe", age: 44 , image: "https://randomuser.me/api/portraits/med/men/25.jpg"}
];

// User Component - function style
function User(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p style={{ color: "red" }}>{props.age}</p>
      <img src={props.image} alt="user profile pic"></img>
    </div>
  );
}

// // User Component - class style
// class User2 extends React.Component {
//   constructor(props){
//     super(props);
//   }
//
//   render() {
//     return (
//       <div>
//         <h2>{this.props.name}</h2>
//         <p style={{ color: "red" }}>{this.props.age}</p>
//         <img src={this.props.image} alt="user profile pic"></img>
//       </div>
//     );
//   }
// }

const userList = users.map( u => <User key={u.name} name={u.name} age={u.age} image={u.image} />);

ReactDOM.render(
  <div>
    {userList}
  </div>,
  document.getElementById("root")
);