Dynamic content not loading in React class that is extending component

I’m new to React and I’m trying to load in my content that is being fetched from an API. Normally I use export default function About({ posts }) and it loads my content, but for 1 of my pages I’m using export default class BlogPost extends Component { and don’t know where I can put my ({posts}) here. I have tried the following, but it still does not load my dynamic content.

export default class BlogPost extends Component {
  constructor(posts) {
    super(posts);
    this.renderTitle = this.renderTitle.bind(this);
  }

  renderTitle() {
    return <div>{posts.Title}</div>;
  }

  render() {
    var settings = {
      dots: true,
      infinite: false,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 4,
      initialSlide: 0,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true,
          },
        },
      ],
    };

    return (
      <>
          <div>
            {this.renderTitle}
          </div>
      </>
    );
  }
}

// Tell nextjs how many pages are there
export async function getStaticPaths() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  const paths = posts.map((blog) => ({
    params: { id: blog.id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}

// Get data for each individual page
export async function getStaticProps({ params }) {
  const { id } = params;

  const res = await fetch(`http://localhost:1337/blogs?id=${id}`);
  const data = await res.json();
  const post = data[0];

  return {
    props: { post },
  };
}

Answer

Class is using props with this.props. So you can update like this to use posts

export default class BlogPost extends Component {
  constructor(props) {
    super(props);
    this.renderTitle = this.renderTitle.bind(this);
  }

  renderTitle() {
    return <div>{this.props.posts.Title}</div>;
  }

getStaticProps return an object of props, so update like this:

export async function getStaticProps({ params }) {
  ...
  return {
    post,
  };
}

And you also need to call funtion this.renderTitle:

{this.renderTitle()}