Children Rendering Example for Reusable Component
Thu Feb 10 2022 14:53:04 GMT+0000 (Coordinated Universal Time)
Saved by
@Sensei_p
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)
content_copyCOPY
Comments