React router v6

Question

Hello when I try to get data from a file. The react app goes blank. Here is what I have:

import React from 'react';
import {Link, useParams} from "react-router-dom";
import articles from "./article-content";

const ArticlePage = () =>{
const { name } = useParams();
const { article } = articles.find(article => article.name === name)

return(
<>
    <div id="page-body">
        <h1>{article.title}</h1>
        <h1>{article.content}</h1>
    </div>
</>
);
}
export default ArticlePage;

and here is example of the article-content:

const articles = [
{
    name: 'learn-react',
    title: 'The Fastest Way to Learn React',
    content: [.....
]]
export default articles;

Any ideas why it's going blank instead of rendering?

Answer 1

You can use the Chrome's console to have a clue of what is happening with your app. Press F12 or right click on your Chrome and open the Inspector, and then go to the "Console" tab. It will be your best tool for debugging your apps.

Answer 2

Please change the below lines from const { name } = useParams();const { article } = articles.find(article => article.name === name)

to const name = useParams(); const article = articles.find(article => article.name === name)

you cannot able to destructure it.