Using map function to create React components

Question

I want to map over values and return an instance of my <FirstRepeatAttributeLabelAssistant /> for every label (basically to render an label above each input, number of inputs can vary).

I've started off with this:

{object.attributeCollection.questions.map((question) => (
   <FirstRepeatAttributeLabelAssistant />
))}

The output of the map above is like so:

[StringAttributeModel, MemoAttributeModel, LabelAttributeModel, MemoAttributeModel, StringAttributeModel, StringAttributeModel] I only care about the "StringAttributeModel" as each of those 3 include 3 different labels (the part I care about). Their structure is like so:

How can I update my logic to ensure all of the potential labels are covered and a <FirstRepeatAttributeLabelAssistant /> component is rendered for each of them?

What are the required props of FirstRepeatAttributeLabelAssistant? And what did you show in your console? Was it object.attributeCollection.questions? — GalAbra
– GalAbra, Commented Sep 10, 2021 at 12:45
it's probably just going to take a prop of: question={question}. The log of that question in the child component is all of the different objects yeah object.attributeCollection.questions was what was shown in the console. — cts
– cts, Commented Sep 10, 2021 at 12:49

windmaomao · Accepted Answer · 2021-09-10 12:49:37Z

1

Suppose all your elements are a component, then you can simply do.

{object.attributeCollection.questions.map(Comp => {
  ...
  return <Comp label="..." />
})}

You can fill whatever your custom logic in the ... area.

answered Sep 10, 2021 at 12:49

windmaomao

7,7322 gold badges37 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

Using map function to create React components

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