parse-wp-rest-api-0-setinnerhtml.js

import React, { useState, useEffect } from "react";
import Axios from "axios";

export default function App() {
  const [post, setPost] = useState(null);

  useEffect(() => {
    Axios.get("https://since1979.dev/wp-json/wp/v2/posts/1601").then(
      response => {
        setPost(response.data);
      }
    );
  }, [setPost]);

  return (
    <div className="App">
      {post && (
        <div>
          <h1>{post.title.rendered}</h1>
          <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
        </div>
      )}
    </div>
  );
}

parse-wp-rest-api-1-parse.js

import React, { useState, useEffect } from "react";
import Axios from "axios";
import parse from "html-react-parser";

export default function App() {
  
  // ...

  return (
    <div className="App">
      {post && (
        <div>
          <h1>{post.title.rendered}</h1>
          {parse(post.content.rendered)}
        </div>
      )}
    </div>
  );
}

parse-wp-rest-api-3-wpapicontent.js

import React from "react";
import parse from "html-react-parser";
import Gist from "super-react-gist";

export default function WpApiContent(props) {
  return parse(props.content, {
    replace: (domNode) => {
      if(domNode.name === "script" && domNode.attribs.src.indexOf("/gist.github.com/") ) {
        return (<Gist url={domNode.attribs.src.replace(".js", "")} />)
      }
    }
  });
}

parse-wp-rest-api-4-wpapicontent.js

import React, { useState, useEffect } from "react";
import Axios from "axios";
import WpApiContent from "./WpApiContent.js";

export default function App() {
  
  // ...

  return (
    <div className="App">
      {post && (
        <div>
          <h1>{post.title.rendered}</h1>
          <WpApiContent content={post.content.rendered} />
        </div>
      )}
    </div>
  );
}

parse-wp-rest-api-5-finishedappcomp.js

import React, { useState, useEffect } from "react";
import Axios from "axios";
import WpApiContent from "./WpApiContent.js";

export default function App() {
  const [post, setPost] = useState(null);

  useEffect(() => {
    Axios.get("https://since1979.dev/wp-json/wp/v2/posts/1601").then(
      response => {
        setPost(response.data);
      }
    );
  }, [setPost]);

  return (
    <div className="App">
      {post && (
        <div>
          <h1>{post.title.rendered}</h1>
          <WpApiContent content={post.content.rendered} />
        </div>
      )}
    </div>
  );
}