dynamic attributes

[sridhar-v9]

hi Team,

Need suggestion/help

I have scenario where i need to add attributes dynamically based on another attribute presence.

Ex:
Have a hyperlnik component which take several attributes as props from developer.
to this component i want to add attributes based on a prop like
if a prop called "dataTarget" is present then i need to add 2 more attributes called "data-toggle and
aria-expanded".. How i can do this react templates.

please provide any comments/direction
Regards,
Sridhar.V

[nippur72]

rt-props attribute allows you to pass attributes as an object, look into it

[sridhar-v9]

rt-props attribute allows you to pass attributes as an object, look into it

I tried.. But my real scenario will be like this

  rt-props={this.props.datatarget?{data-toggle:'collapse',aria-expanded:false}:''}

I have to use ternary operator .. can you please help in this

[nippur72]

the only thing that comes in my mind is to have an helper function, e.g:

rt-props={augmentProps(this.props)}

...

// the augmentProps() function can be required or included
function augmentProps(p) {
  if(p.datatarget !== undefined) return { data-toggle:'collapse', aria-expanded:false};
}

[sridhar-v9]

Yes.. The solution is got worked. thank you for your quick reply...
I have one more question on rt-repeat tag
Question:
collection =[
{
firstName":Google",
lastName:"angular"
},
{
firstName":Facebook",
lastName:"React"
}
]
I have a component which is looping by using rt-repeat like

{this.props.children}

The children can be another React component which is trying to access the "item.firstName"... We are getting an error like item is not defined.

How we can pass the item to children so that i can use item in child components tooo.

Thanks in advance.

Regards,
Sridhar.V

[nippur72]

You should look into React's Context as way of passing data to children.

Keep also in mind that this.props.children is an array, not just a single component.

[sridhar-v9]

Thank you .. for your suggestion... i agree children is array of childs
My code look like

  <div rt-repeat="item in collection">
       {this.props.children}
   </div>

To access the "Item" in the childs you want me put this data in React context.. so that children is able to use that data and the below code snipet works

 `<div rt-repeat="item in collection">
  <CustomComponent  > {item.firstName} </Customcomponent>
 </div>`

Please correct me if my understanding is not correct

[sridhar-v9]

Can you please provide an simple Example how these React Teamplates works with React Context .. That will be an very good help for me.
Thanks in advance.

Regards,
Sridhar.V