CODEWITHSUNDEEP
javascriptarraysreactjs
Tony Hoan Trinh
Tony Hoan Trinh

Reputation: 485

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

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

enter image description here

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!

Upvotes: 0

Views: 161

Answers (1)

andy mccullough
andy mccullough

Reputation: 9591

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

Upvotes: 1

Related Questions