Cannot add a new article in a simple blog built with react - node.js

Question

I have built a simple blog with React. I am having an issue, whenever I try and add a new article. I get the below error.
TypeError: Cannot read property 'upvotes' of null
The article page code is below:
const ArticlePage = ({ match }) => {
const name = match.params.name;
const article = ArticleContent.find(article => article.name === name);
const [articleInfo, setArticleInfo] = useState({ upvotes: -1, 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(article => article.name !== name);
return (
<>
<h1>{article.title}</h1>
<UpvotesSection articleName={name} upvotes={articleInfo.upvotes} setArticleInfo={setArticleInfo} />
{article.content.map((paragraph, key) => (
<p key={key}>{paragraph}</p>
))}
<CommentsList comments={articleInfo.comments} />
<AddCommentForm articleName={name} setArticleInfo={setArticleInfo} />
<h3>Other Articles:</h3>
<ArticlesList articles={otherArticles} />
</>
);
}
That is where the error tells me to look. I have tried to comment the upvotes section out, it just changes the error to comments. I comment them both out and the article renders but it has no comments or upvotes.

Answer 1

You get the error because your articleInfo is null.
That's why it doesn't find upvotes or comments in your return method.
Your initial state contains an object { upvotes: -1, comments: [] }. So that's not the problem. The only place where this can go wrong is where you call setArticleInfo.
Have you tried logging your body variable?
My guess is that your body variable is null, and by calling setArticleInfo(body) you set your articleInfo to be null hence why it throws an error.