Actualmente estoy tratando de representar una matriz de componentes JSX. Veo dos formas posibles de hacer esto.
Uno (enfoque actual): cree la matriz de tipo de objeto que contiene las propiedades del componente y luego construya el componente JSX en línea utilizando los contenidos de la matriz como accesorios
const todos = { title:string,content:string }[]; todos.map((todo:{ title:string,content:string })=>{<TitleCard title={todo.title}/>;Dos: haga la matriz de elementos de tipo JSX para que la matriz almacene el elemento JSX puro y simplemente lo coloque con un .mapa dentro de una función de representación. Considero que el primer enfoque es más limpio, pero requiere un poco más de trabajo en términos de construir los elementos JSX a partir de los accesorios en la matriz.
¿Qué enfoque sería la forma correcta/mejor de hacer esto? Agradezco la ayuda.
No estoy seguro de entender su segundo enfoque, pero el primero suena bien. Limpié un poco el código y este es el camino a seguir:
type Todo = { title:string, content: string } // this data(todos) probably will come from your props but I added some // dummy data for demonstration purpose const todos: Todo[] = [ {title:"title1", content:"content1"}, {title:"title2",content:"content2"} ]; const mappedTodosToRender = todos.map(({title})=>{<TitleCard key={title} title={title}/>; return ( <> {mappedTodosToRender} </> )