Children Rendering Example for Reusable Component

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


// pass children as prop
// use string literals
// spread in other props, the onClick
const Badge = ({ children, color, ...props }) => {
  return <span className={`badge ${color}`} {...props}>{children}</span>
}

const App = () => {
  return (
    <section>
      <h1>Check out these badges!</h1>
      <Badge color="green">Success</Badge> This is operational. <br />
      <Badge color="red">Removed</Badge> This is critical. <br />
      <Badge color="yellow">Warning</Badge> This is a warning. <br />
      <Badge color="blue" onClick={() => {
        console.log('clicked!')
      }}>Beta</Badge> This is in progress. <br />
    </section>
  )
}

const domElement = document.getElementById('root')
ReactDOM.render(<App />, domElement)