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

Aperta Adatta ai principianti
  • Qualcosa non va?
#1,469 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

@dhavalveera ci sta già lavorando.

Dal 26/8/2024.

  • #1475 di @dhavalveera — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
62/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia in packages/ui/src/components/Carousel/Carousel.tsx, all’accesso a child.props.className intorno alla riga 93. Riproduci il problema con l’esempio di figli dinamici del report, quindi verifica che increasing count non generi più errori quando i figli condizionali sono assenti e che Carousel continui a renderizzare i suoi figli validi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

:bug: bug
  • 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

Lingua principale
TypeScript
Stelle
2.1k
Fork
502
Merge medio
19h 16m
PR unite (30g)
2

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di themesberg/flowbite-react

Tutte le issue di themesberg/flowbite-react

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.