How to solve react hydration error in Nextjs

Question

I have created small nextjs page using wordpress REST API, Now react-hydration-error error show this page.I am using react html parser npm. How do I solve this error. could you please solve this error.

my code:

import Image from 'next/image';
import React, { Component } from 'react';
import Link from 'next/link';
import { BiCalendar } from 'react-icons/bi';
import ReactHtmlParser from 'react-html-parser';

export default class Blog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.bloglist,
      isLoading: true,
      dataLoaded: false,
    };
  }

  render() {
    if (!this.state.data) {
      return null;
    }
    console.log(this.state.data);
    return (
      <>
        <div className="container blog-section">
          <div className="row">
            <h2>Latest Posts</h2>
          </div>
          <div className="row">
            {this.state.data.map((x, i) => (
              <div className="col-md-4 boxs text-center" key={i}>
                <div className="bg-info">
                  <img src={x.images.large} className="img-fluid" alt={x.title.rendered} />
                  <h3>{x.title.rendered}</h3>
                  <p className="shopping">
                    <span>
                      <BiCalendar /> {x.date}
                    </span>
                  </p>
                  {/* <p dangerouslySetInnerHTML={{__html: x.excerpt.rendered}}></p><span><BiShoppingBag/> {x.slug}</span> */}
                  <p className="expert">{ReactHtmlParser(x.excerpt.rendered)}</p>
                  <Link href={`/blog/${x.slug}/${x.id}`} passHref={true}>
                    <p className="readmore">
                      <span>Readmore</span>
                    </p>
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </>
    );
  }
}

My original issues: paragraph coming this format <p>If you have heard that there are ways to make money while shopping in the UAE and would lik</p> from API, So I converted to html.

Answer 1

You can use this trick to check if the component has been mounted

  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }