Using context in react but they are not loading. I get TypeError: render is not a function

Question

I am trying to use the state of users to display them in the posts page, but it does not render anything, I get an error "render is not a function". Any help is highly appreciated. This is my front end

This is my code:

function PostsList(props) {
 
    let { deletePosts } = useContext(PostsContext);

    let users = useContext(UserContext);

    let formatDate=(input)=>{
        let v=new Date(input);
        return v.toLocaleDateString("en-US")
    }

    return (
        <PostsContext.Consumer value={users}>
            <UserContext.Consumer>
         {
            ({ posts }) => {
                return <div>
                    <h3>welcome back,  {users.name}</h3>
                    <a href="/posts/new"><button>Add New Post</button></a>
                    <div>
                        {posts.map((c) => {
                            console.log(posts)
                            return (
                                <div className='posts_list'>
                                <div key={c._id}>
                                </div>
                                <div className='posts_text'>
                                    <h2>{c.name}</h2>
                                </div>
                                    <div className='list'>
                                    <Link to={`/edit/${c._id}`}>
                                    <button>Edit</button>
                                    </Link>
                                    <button onClick={() => { deletePosts(c._id)}}>Delete</button>
                                    <p>Tweet created on: {formatDate(c.createdAt)}</p>
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>

            }
        }
        </UserContext.Consumer>
        </PostsContext.Consumer>
    );
}

export default PostsList;

A .Consumer would not have a value.

AKX
– AKX

2022-09-28 05:33:27 +00:00
Commented Sep 28, 2022 at 5:33 — AKX
– AKX, Commented Sep 28, 2022 at 5:33

vighnesh153 · Accepted Answer · 2022-09-28 08:02:44Z

The Consumer component of a context is intended to be used in class components because we cannot use the useContext hook in a class component. So, you could remove the Consumer as you are using the useContext hook.

You will have to wrap your PostList component with the context providers somewhere in the parent like the following:

function App() {
  return (
    <UserContext.Provider value={someValue}>
      <PostsContext.Provider value={someValue}>
        <PostList />
      </PostsContext.Provider>
    </UserContext.Provider>
  );
}

Then, you can use the context like the following:

function PostList() {
  const users = useContext(UserContext);

  // I am assuming you get posts from "PostsContext" itself
  const { deletePosts, posts } = useContext(PostsContext);

  const formatDate = (input) => new Date(input).toLocaleDateString("en-US")

  return (
    <div>
      <h3>welcome back,  {users.name}</h3>
      <a href="/posts/new"><button>Add New Post</button></a>
      <div>
        {posts.map((c) => {
          console.log(posts)
          return (
            <div className='posts_list'>
              <div key={c._id}></div>
              <div className='posts_text'>
                <h2>{c.name}</h2>
              </div>
              <div className='list'>
                <Link to={`/edit/${c._id}`}>
                  <button>Edit</button>
                </Link>
                <button onClick={() => { deletePosts(c._id)}}>
                  Delete
                </button>
                <p>
                  Tweet created on: {formatDate(c.createdAt)}
                </p>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  );
}

Collectives™ on Stack Overflow

Using context in react but they are not loading. I get TypeError: render is not a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related