I'm trying to build a react website blog. I have a JSON file that has all my posts in. I want to pass the data to my blogSelction component. The goal is to have different cards and in each card have the data from the JSON. There will be a different blog post in a different div. I would like it so when I add to the JSON file it automatically makes a card post that you can click on.
I was just wondering what is the best way to go about making the code for it, I am a complete newbie so it might be really simple I'm just uneducated in the topic.
How I have tried to do it is useState and useEffect for the computer to know the directory; using it so the code knows where to look. After its in-state, I use the map call and try it get the posts but it doesn't seem to work.
import React, { useEffect, useState } from "react";
import "./style.css";
import { NavLink } from "react-router-dom";
import Card from "../../Card";
import blogPost from "../../../data/blog.json";
const BlogCards = (props) => {
const [post, setpost] = useState([]);
const [blogs, setblogs] = useState([
{
id: "",
blogCategory: "",
blogTitle: "",
postedOn: "",
author: "",
blogImage: "",
blogText: "",
blogText2: "",
blogText3: "",
blogText4: "",
},
]);
useEffect(() => {
const blogs = blogPost.data;
setblogs(blogs);
}, [blogs]);
if (blogs.blogImage == "") return null;
return (
<div className="item-1">
<article className="IndividualArticles">
<Card>
{blogs.map((blog) => {
return (
<NavLink key={blog.id} className="Link" to={`/post/${post.id}`}>
<div>
<h1>{blog.blogTitle}</h1>
<p>{blog.blogText}</p>
<span>Posted on {blog.postedOn}</span>
</div>
</NavLink>
);
})}
</Card>
</article>
</div>
);
};
export default BlogCards;
{
"data" : [
{
"id": 1,
"blogCategory": "",
"blogTitle" : ".",
"postedOn" : "06/08/2020",
"author": "Robert Lawson ",
"blogImage" : "",
"blogText" : "",
"blogText2" : "",
"blogText3" : "",
"blogText4" : ""
},
{
"id": 2,
"blogCategory": "",
"blogTitle" : ".",
"postedOn" : "06/08/2020",
"author": "Robert Lawson ",
"blogImage" : "",
"blogText" : "",
"blogText2" : "",
"blogText3" : "",
"blogText4" : ""
},
{
"id": 3,
"blogCategory": "",
"blogTitle" : ".",
"postedOn" : "06/08/2020",
"author": "Robert Lawson ",
"blogImage" : "",
"blogText" : "",
"blogText2" : "",
"blogText3" : "",
"blogText4" : ""
},
{
"id": 4,
"blogCategory": "",
"blogTitle" : ".",
"postedOn" : "06/08/2020",
"author": "Robert Lawson ",
"blogImage" : "",
"blogText" : "",
"blogText2" : "",
"blogText3" : "",
"blogText4" : ""
},
{
"id": 5,
"blogCategory": "",
"blogTitle" : ".",
"postedOn" : "06/08/2020",
"author": "Robert Lawson ",
"blogImage" : "",
"blogText" : "",
"blogText2" : "",
"blogText3" : "",
"blogText4" : ""
},
{
"id": 6,
"blogCategory": "",
"blogTitle" : ".",
"postedOn" : "06/08/2020",
"author": "Robert Lawson ",
"blogImage" : "",
"blogText" : "",
"blogText2" : "",
"blogText3" : "",
"blogText4" : ""
}
]
}
I've taken all the data out of the JSON because of the volume of writing.
---Not code related --- While I'm posting on here I would also like to learn how to be more articulate in the programming field so I can express my self better posting on stack overflow + speaking to developers if you have any tips or advice it would be much appreciated.
