title: How To Solve React Hydration Error in Next
body: <p>I keep getting an error saying &quot;Hydration failed because the initial UI does not match what was rendered on the server.&quot;</p>
  <p>I have no idea what is causing the error so I was hoping someone else may know what is wrong. I think I narrowed down where the error is happening and posted the code below of where I think it breaks. If any more code is needed let me know.</p>
  <p>Thanks in advance for all the help.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect } from &quot;react&quot;;
  import styles from &quot;../../styles/Home.module.css&quot;;
  import Coin from &quot;../Coin/Coin&quot;;
  
  type CoinListProps = {
    coins: any;
  };
  
  const CoinList = ({ coins }: CoinListProps) =&gt; {
    useEffect(() =&gt; {
      console.log(coins);
    }, []);
  
    return (
      &lt;div className={styles.coinList}&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;th&gt;Coin&lt;/th&gt;
            &lt;th&gt;Price&lt;/th&gt;
            &lt;th&gt;24h&lt;/th&gt;
          &lt;/tr&gt;
          {coins.map((coin: any, index: any) =&gt; (
            &lt;Coin key={index} coin={coin} /&gt;
          ))}
        &lt;/table&gt;
      &lt;/div&gt;
    );
  };
  
  export default CoinList;
  
  </code></pre>