2

trying to use useState hook in some part of my code , but I get this error:

Error: Objects are not valid as a React child (found: object with keys {email, text, id}). If you meant to render a collection of children, use an array instead.

Removing everything in the parantheses of useState makes the error go away but, why is this causing a problem??

    import React , {createContext, useState} from 'react';
    import {v4 as uuid} from 'uuid';
    export const CommentContext = createContext();
    const CommentContextProvider = (props) => {
        const [comments , setComment] = useState([
            {email: 's.jahanmard@gmail.com',
             text:'Nicest guy eeeeveeer!', id:1},
            {email: 'jahanmard22@gmail.com',
             text:'buffed as f...', id:2}
        ]);
        const addComment = (email,text) =>{
            setComment ([...comments, {email,text,id:uuid()}])
        }
        return (
            <CommentContext.Provider value={{comments , addComment}}>
                {props.children}
            </CommentContext.Provider>
        )
    }
    export default CommentContextProvider
Luis Paulo Pinto
  • 5,578
  • 4
  • 21
  • 35
Sobhan Jahanmard
  • 821
  • 5
  • 16
  • I've set up a codesandbox here. for me your code runs fine: https://codesandbox.io/s/staging-butterfly-7cfdi – Giraphi Jul 06 '21 at 13:38

1 Answers1

-1

Can you provide a sample code displaying how you are trying to render that comment data?

I guess you are trying to do something like this.

<div>
{comment}
</div>

You can try to check this thread, it may help you

mfurkangok
  • 89
  • 5