callstack / callstack/react-native-paper
Card component injects invalid props into React.Fragment children
- Lenguaje dominante
- TypeScript
- Estrellas
- 14.5k
- Forks
- 2.2k
- Merge medio
- 5 d 23 h
- PR fusionados (30 d)
- 12
Descripción
### Current behaviour
The Card component clones its children and injects additional props (index, total, siblings, borderRadiusStyles). This leads to runtime errors when a child is a React.Fragment, which only accepts key and children props. Other components that do not expect these props may also be affected.

### Expected behaviour
The Card component should render React.Fragment children without throwing runtime errors by avoiding invalid prop injection.
### How to reproduce?
Pass a React.Fragment as a child of Card.
### What have you tried so far?
Relevant source line: https://github.com/callstack/react-native-paper/blob/main/src/components/Card/Card.tsx#L278
Potential fix:
```tsx
import { Fragment } from 'react';
// ...
const content = (
{React.Children.map(children, (child, index) => {
if (!React.isValidElement(child)) {
return child;
}
if (child.type === Fragment) {
return child;
}
return React.cloneElement(child as React.ReactElement, {
index,
total,
siblings,
borderRadiusStyles,
});
})}
);
```
Guía de contribución
Línea de trabajo
Start at the child-handling code near line 278 of src/components/Card/Card.tsx and reproduce the issue by passing a React.Fragment to Card. Check how cloned children receive props and verify that Fragment children render without a runtime error or invalid prop injection.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native, typescript
- Área
- mobile
- Tipo de issue
- Error
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Estado de actividad
- Estancado
- Claridad
- Bien especificado
- Aptitud para principiantes
- 45/100