Practical or advanced use cases for static properties - ES6 class
Let me add one. React has concept of compound components.
class Toggle extends React.Component {
static On = ({on, children}) => (on ? children : null)
static Off = ({on, children}) => (on ? null : children)
static Button = ({on, toggle, ...props}) => (
<Switch on={on} onClick={toggle} {...props} />
)
state = {on: false}
toggle = () =>
this.setState(
({on}) => ({on: !on}),
() => this.props.onToggle(this.state.on),
)
render() {
return React.Children.map(this.props.children, child =>
React.cloneElement(child, {
on: this.state.on,
toggle: this.toggle,
}),
)
}
}
Usage
return (
<Toggle onToggle={onToggle}>
<Toggle.On>The button is on</Toggle.On>
<Toggle.Off>The button is off</Toggle.Off>
<Toggle.Button />
</Toggle>
)
Awaiting to hear from senior Devs to add more and more.
Please feel free to post non React based answers too.