flowbite-react icon indicating copy to clipboard operation
flowbite-react copied to clipboard

fix(Carousel): can't give dynamic children to Carousel

Open kage1020 opened this issue 1 year ago • 0 comments

  • [x] I have searched the Issues to see if this bug has already been reported
  • [x] I have tested the latest version

Steps to reproduce

Create dynamic children Carousel component like below:

function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="bg-gray-800 w-screen h-screen">
      <Button onClick={() => setCount((p) => p + 1)}>count: {count}</Button>
      <Carousel>
        <img src={viteLogo} className="logo" alt="Vite logo" />
        <img src={reactLogo} className="logo" alt="React logo" />
        {count < 5 && <img src={viteLogo} className="logo" alt="Vite logo" />}
      </Carousel>
    </div>
  );
}

Then, count up to 5 by clicking button

Current behavior

Flowbite throws error of TypeError: Cannot read properties of null (reading 'props') because it try to get child.props.className in this code.

Expected behavior

Skip processing Falsy values.

Context

Live Preview: https://stackblitz.com/edit/vitejs-vite-fynok7?file=src%2FApp.tsx

kage1020 avatar Aug 16 '24 15:08 kage1020