mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
53f2d88566
…aces (home and about pages). This makes it the example more clear and why someone might want to use _app.js in the first place. Also, added a button on the about page that allows for passing and arbitrary value from the about page to the context provider. I disagree with the naming convention of calling the class CounterProvider. It includes both a Provider and Consumer so it should have some name that covers both. Maybe it should be called CounterContext but I did not change that. I've seen other examples of the same naming conversion so figure I'm the odd duck here (still think it's wrong no matter how many people do it).
51 lines
975 B
JavaScript
51 lines
975 B
JavaScript
import React, { Component } from 'react'
|
|
|
|
/* First we will make a new context */
|
|
const CounterContext = React.createContext()
|
|
|
|
/* Then create a provider Component */
|
|
class CounterProvider extends Component {
|
|
state = {
|
|
count: 0
|
|
}
|
|
|
|
increase = () => {
|
|
this.setState({
|
|
count: this.state.count + 1
|
|
})
|
|
}
|
|
|
|
increaseBy = (val) => {
|
|
this.setState({
|
|
count: this.state.count + val
|
|
})
|
|
}
|
|
|
|
decrease = () => {
|
|
this.setState({
|
|
count: this.state.count - 1
|
|
})
|
|
}
|
|
|
|
render () {
|
|
return (
|
|
<CounterContext.Provider
|
|
value={{
|
|
count: this.state.count,
|
|
increase: this.increase,
|
|
decrease: this.decrease,
|
|
increaseBy: this.increaseBy
|
|
}}
|
|
>
|
|
{this.props.children}
|
|
</CounterContext.Provider>
|
|
)
|
|
}
|
|
}
|
|
|
|
/* then make a consumer which will surface it */
|
|
const CounterConsumer = CounterContext.Consumer
|
|
|
|
export default CounterProvider
|
|
export { CounterConsumer }
|