Learn React Hooks

Passing down props

Before learning about React context in depth, let's recap what we implemented in the earlier chapters, in order to get a feeling for the problem that contexts solve:

1. In src/App.js, we defined the user state and the dispatch function:

    const [ state, dispatch ] = useReducer(appReducer, { user: '', posts: defaultPosts })    const { user, posts } = state

2. Then, we passed the user state and the dispatch function to the UserBar component (and the CreatePost component):

    return (        <div style={{ padding: 8 }}>            <UserBar user={user} dispatch={dispatch} />            <br />            {user && <CreatePost user={user} posts={posts} dispatch={dispatch} />}            <br />            <hr />            <PostList posts={posts} />        </div>    )

3. In the src/user/UserBar.js component, we took the ...