Day 2: title formatting coherence, minor edits

This commit is contained in:
Elizabeth Craig
2019-03-05 02:42:26 -08:00
parent 8c99c83353
commit 46094abe9d
11 changed files with 40 additions and 42 deletions

View File

@@ -8,8 +8,8 @@ We will solve these problems with the [React Context API](https://reactjs.org/do
1. The problem of complex applications
2. React Context API
3. Consuming context from a Class Component
4. Consuming context from a Functional Component
3. Consuming context from a class component
4. Consuming context from a functional component
## The problem of complex applications
@@ -81,7 +81,7 @@ class TodoApp extends React.Component {
}
```
### Consume context from a Class Component
### Consume context from a class component
Inside a class-based child component, such as `<TodoHeader>`, the context created in the parent can be accessed via `this.context`. Note that for this to work, you must also set the component class's `contextType` property to the context type created above.
@@ -97,7 +97,7 @@ class TodoHeader extends React.Component {
TodoHeader.contextType = TodoContext;
```
### Consume context from a Functional Component
### Consume context from a functional component
If you're using the functional component syntax, you can access the context with the `useContext()` hook:

View File

@@ -4,19 +4,19 @@
If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 4 to see results.
## TodoContext.Provider Component
## TodoContext.Provider component
1. Open `exercise/src/components/TodoApp.tsx`
2. Uncomment the missing functions inside the value prop
## TodoFooter, Context inside Functional Component
## TodoFooter: context inside functional component
1. Open `exercise/src/components/TodoFooter.tsx`
2. Use `useContext` to access the `TodoContext` and replace the two constants with values from the context
## TodoHeader, Context inside Class Component
## TodoHeader: context inside class component
1. Open `exercise/src/components/TodoHeader.tsx`