Array of Objects with one of the fields being a React component?

Question

I currently have a regular JavaScript array of objects and each of the objects have their own respective fields.

In the Key field, it is currently text, however I want to replace it with a React component (Hyperlink is my own component)

I want the elements in the key field of each of the object to be instead:

<Hyperlink href="key">key</Hyperlink>

So for example in the first object, the key is CSFS-38709.

I want to change the key to be instead:

<Hyperlink href="http://mylink.com/CSFS-38709"> CSFS-38709 </Hyperlink>

I'm really confused on how to have the fields of objects in an array to be a React component.

Anyone help would be really appreciated!

Please provide data as text, not as a picture. Please also provide a minimal reproducible example so that others can recreate the situation. See How to Ask for more information. — Heretic Monkey
– Heretic Monkey, Commented Jul 26, 2021 at 13:21

andy mccullough · Accepted Answer · 2021-07-26 13:22:10Z

1

generally you don't want to put component instances into an array, you should really keep only your data in your array and then create component instances when for example you map over your array, something like -

resData.map((resDataItem) => (
   <Hyperlink key={resDataItem.key} href={`http://mylink.com/${resDataItem.key}`}>{resDataItem.key}</Hyperlink>
))

etc

answered Jul 26, 2021 at 13:22

andy mccullough

9,6817 gold badges38 silver badges64 bronze badges

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

Collectives™ on Stack Overflow

Array of Objects with one of the fields being a React component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related