How to select a random component in React

Question

I'm trying to create a dynamic website that loads a header component at random on every refresh. No matter which approach I take, it works fine on the initial load and then throws this error every refresh after:

Warning: Prop `className` did not match. Server: "leading-none mb-0 pb-0 text-6xl lg:text-7xl text-pink-light" Client: "leading-none mb-0 pb-0 text-6xl lg:text-7xl text-pink"

Here's my parent component:

import React, { useState } from 'react'
import PageHeader_VarH_Peach from './PageHeader_VarH_Peach'
import PageHeader_VarH_Pink from './PageHeader_VarH_Pink'
import PageHeader_VarH_Pink_Light from './PageHeader_VarH_Pink_Light'
import PageHeader_VarH_Blue from './PageHeader_VarH_Blue'

import PropTypes from 'prop-types'

PageHeader_VarH.propTypes = {
  header: PropTypes.string,
  subheader: PropTypes.string,
  playFrames: PropTypes.array,
}
const patterns = [
  PageHeader_VarH_Peach,
  PageHeader_VarH_Pink,
  PageHeader_VarH_Pink_Light,
  PageHeader_VarH_Blue,
]

function PageHeader_VarH({ header, subheader }) {
  const [randomNumber] = useState(Math.floor(Math.random() * patterns.length))

  const ThisPattern = patterns[randomNumber]

  return (
    <div>
      <ThisPattern header={header} subheader={subheader} />
    </div>
  )
}
export default PageHeader_VarH

I know useState might not be the answer, but it's currently where I'm at with the debugging process. Here's an example of one of the PageHeader components. The patterns load totally fine at random (they're Lottie elements). My current thing right now is experimenting with the ClassNames package to see if that works (it doesn't)

import React from 'react'
import Lottie from 'react-lottie-player'
import classNames from 'classnames'
import Pattern from '../../data/Patterns_Peach.json'
import PropTypes from 'prop-types'

PageHeader_VariableHeight.propTypes = {
  header: PropTypes.string,
  subheader: PropTypes.string,
  pattern1: PropTypes.object,
}

// Local Variables

const primaryColor1 = 'peach'
const accentColor1 = 'egg'
const subheaderColor1 = 'egg '

const pattern1 = Pattern
const playFrames = [
  [0, 23],
  [24, 95],
]

function PageHeader_VariableHeight({ header, subheader }) {
  function Pattern({ pattern1 }) {
    return (
      <Lottie
        animationData={pattern1}
        loop
        segments={playFrames}
        play
        rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }}
        style={{ height: '100%' }}
      />
    )
  }

  return (
    <section
      className={classNames('relative overflow-hidden lander-variableHeight my-4', [
        `bg-${accentColor1}`,
      ])}
      id='topOfPage'
    >
      <div className=' z-0 absolute  top-0 left-0 w-full h-full overflow-hidden lottie' id='lottie'>
        <Pattern pattern1={pattern1} />
      </div>
      <div className='relative py-16 my-20 h-full flex flex-col justify-center bg-transparent '>
        <div
          className={classNames(
            'my-20 max-w-xs  sm:max-w-md md:max-w-lg lg:max-w-3xl py-12 flex justify-center ',
            [`bg-${primaryColor1}`],
          )}
        >
          <div className='w-fit px-6'>
            <h1
              className={classNames('leading-none mb-0 pb-0 text-6xl lg:text-7xl', [
                `text-${accentColor1}`,
              ])}
            >
              {header}
            </h1>
            <div className={classNames('my-2 text-2xl font-bold', [`text-${subheaderColor1}`])}>
              {subheader}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
export default PageHeader_VariableHeight

It's a big project, but here's a link to the full repo if anyone wants to sift through it: pb-oct-22

I'm banging my head against a wall. It's been two days of google searches and I feel like I've tried everything. Any help would be appreciated.

Answer 1

I noticed that you already tried editing babelrc file, but can you try add this

"plugins": [ [ "babel-plugin-styled-components" ] ]

and ofc install babel-plugin-styled-components if you didnt.

Check that guide tho, there are like 7 different answers for your problem, hope one of them solves it.