themesberg / themesberg/flowbite-react

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

Open Beginner friendly
#1,469 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.1k
Forks
506
PR merge metrics
No merged PRs in 30d

Description

  • 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/ui/src/components/Carousel/Carousel.tsx at the child.props.className access around line 93. Reproduce the issue with the dynamic children example from the report, then verify that increasing count no longer throws when conditional children are absent and that Carousel still renders its valid children.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
62/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.