0

I'm working through a React tutorial and can't get past this error:

I have this ArticlePage which gets articleInfo from state and then sends it as a parameter to UpvotesSection.js:

const ArticlePage = ({ match }) => {
    const name = match.params.name;
    const article = articleContent.find(m => m.name === name);

    const [articleInfo, setArticleInfo] = useState({ upvotes: 0, comments: [] });

    useEffect(() => {
        const fetchData = async () => {
            const result = await fetch(`/api/articles/${name}`);
            const body = await result.json();
            setArticleInfo(body);
        };
        fetchData();
    }, [name]);

    if (!article) return <NotFoundPage />;

    const otherArticles = articleContent.filter(m => m.name !== name);

    return (
        <>
            <h1>{article.title}</h1>
            <UpvotesSection articleName={name} upvotes={articleInfo.upvotes} setArticleInfo={setArticleInfo} />
            {article.content.map((text, key) => (
                <p key={key}>{text}</p>
            ))}
            <CommentsList comments={articleInfo.comments} />

            <ArticlesList articles={otherArticles} />
        </>
    )
}

In UpvotesSection.js, I simply display it:

import React from 'react';

const UpvotesSection = (articleName, upvotes, setArticleInfo) => {
    const upvoteArticle = async () => {
        const result = await fetch(`/api/articles/${articleName}/update`, {
            method: 'post'
        });
        const body = result.json;
        setArticleInfo(body);
    }

    return (
        <div className="upvotes-section">
            <button onClick={() => upvoteArticle()}>Add Upvote</button>
            <p>This article has been upvoted {upvotes} times.</p>
        </div>
    );
};

export default UpvotesSection;

The error is this:

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
    in p (at UpvotesSection.js:16)
    in div (at UpvotesSection.js:14)
    in UpvotesSection (at ArticlePage.js:31)
    in ArticlePage (created by Context.Consumer)
    in Route (at App.js:27)
    in Switch (at App.js:23)
    in div (at App.js:22)
    in div (at App.js:20)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:18)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

If I don't display upvotes in UpvotesSection.js, then I don't get the error, but upvotes is an integer, not a JavaScript Object.

What could be causing this problem?

Edward Tanguay
  • 189,012
  • 314
  • 712
  • 1,047
  • 1
    Shouldn't this: `body = result.json` be `body = result.json()`? If I remember correct, `.json` is a method and not a property. [MDN - Ref](https://developer.mozilla.org/en-US/docs/Web/API/Body/json) – Rajesh Jun 09 '20 at 03:27
  • Can you give the articleInfo's data after api call. I mean what you are getting from api. – moshfiqrony Jun 09 '20 at 03:30
  • 1
    Is this a typo `const UpvotesSection = (articleName, upvotes, setArticleInfo) => {....}` on your end. If not you should be destructuring from the props like `const UpvotesSection = ({ articleName, upvotes, setArticleInfo }) => {.....}` – subashMahapatra Jun 09 '20 at 03:30
  • Does this answer your question? [Invariant Violation: Objects are not valid as a React child](https://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child) – Hai Pham Jun 09 '20 at 03:33
  • are you able to replicate this for us in a jsfiddle? – Red Baron Jun 09 '20 at 06:25

1 Answers1

0
   const result = await fetch(`/api/articles/${name}`);
   const body = await result.json();
   setArticleInfo(body);

i think problem is here. what's your body return ? object or a number ?

Anh Tuan
  • 1,113
  • 5
  • 12