Tengo una aplicación raíz que contiene el componente "Contenido", pero ahora deseo crear tres componentes secundarios "Parte" dentro de "Contenido". Cómo debería hacerlo ?
const Content = (props) => { return ( <div> <p>{props.part} {props.exercise}</p> </div> ) const App = () => { const course = 'Half Stack application development' const part1 = 'Fundamentals of React' const exercises1 = 10 const part2 = 'Using props to pass data' const exercises2 = 7 const part3 = 'State of a component' const exercises3 = 14 return ( <div> <Header course={course} /> <>Content:</> <Content part={} exercise={}/> <>Total:</> <Total exercise={exercises1 + exercises2 +exercises3} /> </div> ) }No estoy completamente seguro, pero este es el ejemplo, obtuve
const Content = ... { return ( <div> <Part .../> <Part .../> <Part .../> </div> ) }Pregunta nuevamente: refactorice el componente Contenido para que no represente los nombres de las partes o su número de ejercicios por sí mismo. En su lugar, solo representa tres componentes de la Parte, cada uno de los cuales representa el nombre y el número de ejercicios de una parte.
Puede mantener los datos de cada part en una array y usar el map para representarlo. Este es un patrón normal de hacerlo.
Prueba así
import React from "react"; const Content = ({ content }) => { return ( <div> <p> {content.part} {content.exercise} </p> </div> ); }; const App = () => { const course = "Half Stack application development"; const contents = [ { part: "Fundamentals of React", exercise: 10 }, { part: "Using props to pass data", exercise: 7 }, { part: "State of a component", exercise: 14 } ]; return ( <div> <Header course={course} /> <>Content:</> {contents.map((content) => ( <Content content={content} /> ))} <>Total:</> <Total exercise={exercises1 + exercises2 + exercises3} /> </div> ); }; export default App;