Skip to content

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

Open
@kage1020

Description

@kage1020
  • I have searched the Issues to see if this bug has already been reported
  • 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions