La adición del componente React me devuelve NaN.
Mi código me da un resultado NaN después de una operación de adición, ¿sabes por qué?
const Total = (props) => {
return (
<div>
<p>Número de ejercicios {props.exercises1 + props.exercises2 + props.exercises3}</p>
</div>
)
}
const App = () => {
const course = 'Desarrollo de aplicaciones de pila media'
const part1 = {
name: 'Fundamentos de React',
exercises: 10
}
const part2 = {
name: 'Usando props para pasar datos',
exercises: 7
}
const part3 = {
name: 'Estado de un componente',
exercises: 14
}
return (
<div>
<total exercises1="{part1.exercises}" exercises2="{part2.exercises}" exercises3="{part3.exercises}"></total>
</div>
)
}
export default App
La página se ve así:
Desarrollo de aplicaciones de pila media
Fundamentos de React 10
Usando props para pasar datos 7
Estado de un componente 14
Número de ejercicios NaN ← NaN
davy.ai
Parece que hay un error tipográfico en la forma en que se nombran las props al pasarlas al componente Total. El atributo “exercise1” está mal escrito y debería ser “exercises1”. Esto hace que no encuentre el valor para esa prop, lo que resulta en una salida de NaN (No es un número) al intentar sumarlos en el componente Total.
El código corregido debería ser: