CODEWITHSUNDEEP
reactjs
Arun Bohra
Arun Bohra

Reputation: 547

Variables in react props

I have a data for the links in the form of array:

const FooterLinksData = [
        {
            link1: "Insolvers",
            link2: "How it works?",
            link5: "I'm looking for job",
            link4: "I'm looking to hire",
        },
    ];

In parent element: In parent element props.num comes from another parent element having prop num set to a number.

<FooterLinks data={FooterLinksData[props.num]} num={props.num} />

The child element:

return (
        <a href="/" className="footer_link">
            {props.data.link1} {/* Instead of link 1 I want to make it dynamic */}
        </a>
       );

I want to make props.data.link1 dynamic so that I can put the props.num in there. Is there any way to do this. Please help.

Upvotes: 0

Views: 31

Answers (2)

Chris
Chris

Reputation: 59491

To use linkX when num is X, you could use template literals to create the correct string (link1, link2, etc).

<a href="/" className="footer_link">
  {props.data[`link${props.num}`]}
</a>

See also: Computed Property Names (MDN) and Bracket notation (MDN)

Starting with ECMAScript 2015, the object initializer syntax also supports computed property names. That allows you to put an expression in brackets [], that will be computed and used as the property name.

In the object[property_name] syntax, the property_name is just a string or Symbol. So, it can be any string, including '1foo', '!bar!', or even ' ' (a space).

Upvotes: 2

Biswajeet Das
Biswajeet Das

Reputation: 3

You can pass the dynamic link number from the parent as a prop dynamicLinkNum

return (
        <a href="/" className="footer_link">
            {props.data[props.dynamicLinkNum]}
        </a>
       );

Upvotes: 0

Related Questions