Let's say we have a blog page with a div class of content and there are previews of articles.
What I want to do is to replace div class of content with the specific article. How can I achieve this?
function Blog() {
redirectToArticle(id) = () => {
title = getTitle(id)
content = getContent(id)
{/*## code to replace div 'content' with <Article title={title} content={content}/>*/}
}
return(
<div className="content">
<div onClick={redirectToArticle(1)}>
<h1>Article Title 1</h1>
<p>Short preview from the article here...</p>
</div>
</div>
)
}
Article example:
class Article extends React.Component {
constructor(props) {
super(props);
this.state = { title: 'Title', content: 'Lorem ipsum dolor sit amet.. . .. . . . . . . . . .'};
}
render(){
return(
<>
<h1>{this.title}</h1>
<p>{this.content}</p>
</>
)
}
}
Why would you like to replace that div? Isn't it better to display the thumbnail with the basic information + onClick route to the main article? I highly recommend using NextJS for that one - static props will help you a lot with that and will ensure you have a good structure - but with a simple CRA you can do it as well. Display a thumbnail with a short description and add onClick a page of the article with all the details and passed props.