在 React/TypeScript 中渲染一组组件？

Question

I'm currently trying to render an array of JSX Components. I see two possible ways for me to do this.

One(current approach): Make the array of type object that holds the properties of the component and then construct the JSX component in line using the array contents as props

const todos = { title:string,content:string }[];
todos.map((todo:{ title:string,content:string })=>{<TitleCard title={todo.title}/>;

Two: Make the array of type JSX elements so the array stores the pure JSX Element and just plops it down with a .map inside a render function. I find the first approach to be more clean, but it requires a bit more work in terms of constructing the JSX elements from the props in the array.

Which approach would be the correct/best way to go about this? Appreciate the help.

Answer 1

I'm not sure if I understand your second approach but first one sounds good. I cleaned the code up a bit and this is the way to go:

 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}
  </>
 )