1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-context-api/components/CounterProvider.js
Peter Kellner 53f2d88566 Updated with-context-api to include an about page and also events that pass data to context provider (#6082)
…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).
2019-01-17 22:13:34 +01:00

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 }