Files
react.dev/examples/context/lifecycles.js
Nathan Quarles 392d5bfdcd Update lifecycles.js (#1098)
`theme ? 'dark' : 'light'` will always use the dark theme no matter what it's set to in context. Guessing this is not what was intended? This PR fixes it.
2018-07-27 13:32:12 -07:00

29 lines
639 B
JavaScript

class Button extends React.Component {
componentDidMount() {
// highlight-next-line
// ThemeContext value is this.props.theme
}
componentDidUpdate(prevProps, prevState) {
// highlight-range{1-2}
// Previous ThemeContext value is prevProps.theme
// New ThemeContext value is this.props.theme
}
render() {
const {theme, children} = this.props;
return (
<button className={theme || 'light'}>
{children}
</button>
);
}
}
// highlight-range{3}
export default props => (
<ThemeContext.Consumer>
{theme => <Button {...props} theme={theme} />}
</ThemeContext.Consumer>
);