How to pass prop to component from array of components in React

Question

Let's say you have an array of components:

var my_array = [ <SomeComponent1 textcolor={defaultFontColor} />, <MyComponent2 textcolor={defaultFontColor} />}, <SomeComponent3 textcolor={defaultFontColor} />}, ...]

And you wanted to iterate over the array, but also pass props to the component (in the example, AComponent):

my_array.map(AComponent => {
      return (
        <View>
          {AComponent}
        </View>
      )
})

How would I pass a prop to {AComponent} in this example?

How do you create the array of components to begin with? Wouldn't it be easier to pass all of the necessary props there? — Code-Apprentice
– Code-Apprentice, Commented Oct 8, 2021 at 14:50

Rajendra Maniyal · Accepted Answer · 2021-10-08 14:47:14Z

2

Consider component as a json object

AComponent = {
   props:{
    prop1: "value for the prop1"
  }
}

So, now you can pass the props you wish like

my_array.map(AComponent => {
  AComponent.props["newProp"] = "propValue"
  return (
    <View>
      {AComponent}
    </View>
  )
})

Or, if you wish to use the props passed while pushing the component in the array you can directly use them in the render() method of the component

answered Oct 8, 2021 at 14:47

Rajendra Maniyal

364 bronze badges

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

3 Comments

AdjunctProfessorFalcon Over a year ago

When I try that I get the following error: "Component Exception: attempted to assign to readonly property"

Rajendra Maniyal Over a year ago

jsfiddle.net/7gnLv48u Try React.cloneElement to create a clone of your component and add additional props

AdjunctProfessorFalcon Over a year ago

Thanks for the jsfiddle, very helpful!

Collectives™ on Stack Overflow

How to pass prop to component from array of components in React

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