themesberg / themesberg/flowbite-react
fix(Carousel): can't give dynamic children to Carousel
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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