-
Notifications
You must be signed in to change notification settings - Fork 26.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated with-context-api to include an about page and also events tha…
…t 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).
- Loading branch information
1 parent
f960091
commit 53f2d88
Showing
5 changed files
with
52 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import React, { Component } from 'react' | ||
/* First we import the consumer */ | ||
import { CounterConsumer } from '../components/CounterProvider' | ||
import Link from 'next/link' | ||
|
||
export default class about extends Component { | ||
render () { | ||
return ( | ||
/* Then we use our context through render props */ | ||
<CounterConsumer> | ||
{({ count, increase, increaseBy }) => ( | ||
<div> | ||
<h1>ABOUT</h1> | ||
<p>Counter: {count}</p> | ||
<button onClick={increase}>Increase</button> | ||
<button onClick={() => { | ||
increaseBy(15) | ||
}}>Increase By 15</button> | ||
<p><Link href='/'> | ||
<a>Home</a> | ||
</Link></p> | ||
</div> | ||
)} | ||
</CounterConsumer> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters