How to render HTML from database in react (ok)

https://stackoverflow.com/questions/70966082/how-to-render-html-from-database-in-react

src\App.tsx

import React from 'react';
import RenderPropApproach from './RenderPropApproach';
function App() {
  return (
    <div className="App">
      <RenderPropApproach />
    </div>
  );
}
export default App;

src\RenderPropApproach\index.tsx

import { Component } from 'react';
import axios from 'axios';
import List from './List';
const API = 'https://wp1.com/wp-json/wp/v2/posts';
const DEFAULT_QUERY = '';
class Fetcher extends Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      data: [],
      isLoading: false,
      error: null,
    };
  }
  componentDidMount() {
    this.setState({
      isLoading: true
    });
    axios({
      method: 'get',
      url: 'https://wp1.com/wp-json/wp/v2/posts',
      data: null
    }).then(result => {
      this.setState({
        data: result.data,
        isLoading: false
      });
    }).catch(error => {
      this.setState({
        error,
        isLoading: false
      })
    });
  }
  showPosts = (posts: any) => {
    var result = null;
    if (posts.length > 0) {
      result = posts.map((post: any, index: any) => {
        return (
          <List key={index} post={post} index={index}>aaaa1</List>
        )
      })
    };
    return result;
  }
  render() {
    var { data }: any = this.state;
    console.log(data);
    return (
      <div>
        {this.showPosts(data)}
      </div>
    );
  }
}
export default Fetcher;

src\RenderPropApproach\List.tsx

import { Component } from 'react';
import renderHTML from 'react-render-html';
class List extends Component<any, any> {
  render() {
    var { post } = this.props;
    return (
      <div className='list'>
        <h1>{post.title.rendered}</h1>
        <div dangerouslySetInnerHTML={{__html: post.content.rendered}}></div>
      </div>
    );
  }
}
export default List;