callstack / callstack/react-native-paper

Card component injects invalid props into React.Fragment children

Abierto
#4,710 1 comentario 4 reacciones 0 asignados Ver en GitHub
bug Card
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.

![Image](https://github.com/user-attachments/assets/d8f0a199-4e2e-4649-9cb1-62e20472142e)

### 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

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.