Server, Client side conflict

Unanswered

Black and yellow mud dauber posted this in #help-forum

Black and yellow mud dauberOP

2023-10-03T15:53:26.000Z

i keep getting this errors Warning: Propstyledid not match. Server: "null" Client: "color:#247e5b" can anyone help me resolve that

8 Replies

Nelson

2023-10-03T16:15:35.000Z

Please provide the code that caused this error.

Black and yellow mud dauberOP

2023-10-04T11:45:42.000Z

@Nelson heres the code 'use client';

import { useState } from 'react';
import { IconContext } from 'react-icons/lib/esm/iconContext';
import { AiOutlineMenu } from 'react-icons/ai';
import { Caesar_Dressing } from 'next/font/google';

import DesktopNavigation from './navigation/DesktopNavigation';
import MobileNavigation from './navigation/MobileNavigation';
import Image from 'next/image';
import { AnimatePresence } from 'framer-motion';

const ceaserDressing = Caesar_Dressing({
  weight: '400',
  subsets: ['latin'],
});

const Header = () => {
  const [mobileNavIsOpen, setMobileNavIsOpen] = useState(false);
  const mobileNavHandler = (state: boolean) => {
    setMobileNavIsOpen(state);
  };
  return (
    <div>
      <div className='flex justify-between items-center visible sm:hidden p-[24px] pt-[71px]'>
        {/* logo mobile */}
        <div className='flex items-center'>
          <Image src='/logo.svg' width={30} height={30} alt='logo' />
          <h3
            className={

${ceaserDressing.className} ml-[12px] text-2xl text-[#404040] tracking-wider

}
          >
            Omnihale
          </h3>
        </div>
        {/* styles the AiOutlineMenu icon */}
        <IconContext.Provider
          value={{ size: '20px', style: { color: '#247e5b' } }}
        >
          <div onClick={() => mobileNavHandler(true)}>
            <AiOutlineMenu />
          </div>
        </IconContext.Provider>
      </div>
      {/* logo desktop */}
      <div className='hidden sm:visible'></div>
      {/* 
        shows menu icon on small screen and hidden on,
        big screen 
      */}
      <AnimatePresence>
        {mobileNavIsOpen && (
          <MobileNavigation
            mobileNavIsOpen
            onMobileNavOpen={mobileNavHandler}
          />
        )}
      </AnimatePresence>
    </div>
  );
};

export default Header;

Nelson

2023-10-04T11:52:36.000Z

@Black and yellow mud dauber Provide the code for IconContext.Provider.

Black and yellow mud dauberOP

2023-10-04T11:54:22.000Z

@Nelson got the IconContext.Provider from react icons package

Nelson

2023-10-04T11:56:25.000Z

@Black and yellow mud dauber Oh, I didn't see it. I will try to debug.

Black and yellow mud dauberOP

2023-10-04T11:56:42.000Z

@Nelson thanks soo much

Nelson

2023-10-04T12:01:58.000Z

@Black and yellow mud dauber Use this import { IconContext } from "react-icons"; instead.

Black and yellow mud dauberOP

2023-10-04T12:02:23.000Z

@Nelson okay thanks on that