Render an array of components in 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.

frankie303 · Accepted Answer · 2022-06-14 08:23:51Z

3

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

answered Jun 14, 2022 at 8:23

frankie303

807 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

oscar-lauth Over a year ago

Thank you! If I plan on the titles being non-unique, should I use key={index} instead?

frankie303 Over a year ago

You could also use uuid package: github.com/uuidjs/uuid. It is not recommended to use indexes which are coming from map. You can find more info here in React official doc: reactjs.org/docs/….

oscar-lauth Over a year ago

Awesome, I will look into UUID and the recs for key values. Thanks!

Collectives™ on Stack Overflow

Render an array of components in React/TypeScript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related