I am currently working on creating a new List page using the news.json file that I have created.
Below, you can see that I am trying to create a list with a map function and also generating Link hrefs with ${item.id}.
The items are representing news1, news2, news3, etc. and for each one, I have created new1.js, new2.js files to link them together.
However, when I attempted to render it, nothing appeared on the screen. I believe there may be an issue with the rendering process.
Even after searching on Google, I came across a post on Stack Overflow which mentioned something about routers needing a key parameter, but I am still struggling to understand it.
Can someone help me figure out how to modify my code?
const NewWrap =()=>{
const articleWrapper = news.map((item)=>{
return(
<Li key={item.id}>
<img src={item.img} alt="img" style={{width:"260px", height:"200px", padding:"1rem"}}/>
**<Link to={`/${item.id}`}** style={{textDecoration:"none", color:"black"}}>
<div style={{padding:"1rem", textAlign:"left", cursor:"pointer"}}>
<p>{item.title}</p>
<p>{item.content.substring(0,305)}...</p>
<p>{item.date}</p>
</div>
</Link>
</Li>
)
});
return(
<Ul>
{articleWrapper}
</Ul>
)
}
const News = () => {
return (
<div>
<ImgBox>
<Img src ="../img/bg_mian_01.png"/>
<ImgText>News and Partners</ImgText>
</ImgBox>
<ConBox>
<Subtitle>NEWS</Subtitle>
<NewWrap/>
</ConBox>
<Switch>
<Route path="/new1" component={New1}/>
</Switch>
</div>
);
};
export default News;