How to replace page with a component

Question

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>
    </>
    )
  }
  
  }

Answer 1

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.