Mapping Props to an Array in React

Question

So I would like to iterate over some props that are being passed to my react component and build a dynamic set of html elements based on the number of links that are passed by the props. the example below will just render the first link.

import React from "react";
import ReactDOM from "react-dom";

const Links = (props) => {
   return (
      <div>
        <p>{props.link.link1}</p>
      </div>
    )
  }

export default Links;

i'm having trouble working out how to map the incoming props to generate a p tag for every link that is in the props object. the links are pulled from a larger json object and are passed to the above component as props.

"links": {
      "link1": "https://www.google.com",
      "link2": "https://www.google.com",
      "link3": "https://www.google.com",
      "link4": "https://www.google.com",
      "link5": "https://www.google.com",
      "link6": "https://www.google.com"
 }

I've tried something like the below but just can't get it work. do i need to make my react component class based? and introduce a constructor / render method to do this correctly?

const buildLinks = this.props.data.map(release => {
    render (
        /// p tags + props go here
    )
})

did you check the docs? reactjs.org/docs/lists-and-keys.html#basic-list-component — azium
– azium, Commented May 1, 2018 at 15:33
i think react doc is very clear about your problem. just check it. — Nahid Hasan
– Nahid Hasan, Commented May 1, 2018 at 15:34

Ori Drori · Accepted Answer · 2018-05-01 15:37:02Z

3

Use Object.keys() to convert the object to array, and create the JSX using Array.map():

const props = {
  "links": {
    "link1": "https://www.google.com",
    "link2": "https://www.yahoo.com",
    "link3": "https://www.facebook.com",
    "link4": "https://www.twitter.com",
    "link5": "https://www.instagram.com",
    "link6": "https://www.gmail.com"
  }
};

const Links = ({ links }) => {
   return (
      <div>
        {
          Object.keys(links).map((link) => (
            <p key={link}>{ links[link] }</p>
          ))
        }
      </div>
    )
  }

ReactDOM.render(
  <Links {...props} />,
  demo
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

answered May 1, 2018 at 15:37

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

2 Comments

Timmy Lee Over a year ago

btw.. how would i add a conditional to that syntax to say render a different image depending on what was in the list of links?

Ori Drori Over a year ago

That's a whole new question Timmy. You should create a new question that shows the current code, and a list of images, and ask how to combine the two.

Nahid Hasan · Accepted Answer · 2018-05-01 15:48:13Z

1

var link = {
  "links": {
    "link1": "https://www.google.com",
    "link2": "https://www.yahoo.com",
    "link3": "https://www.facebook.com",
    "link4": "https://www.twitter.com",
    "link5": "https://www.instagram.com",
    "link6": "https://www.gmail.com"
  }
}

var newlink = Object.values(link)

console.log(Object.values(newlink[0]))

then you can map over them . as you want.

answered May 1, 2018 at 15:48

Nahid Hasan

7251 gold badge11 silver badges36 bronze badges

Collectives™ on Stack Overflow

Mapping Props to an Array in React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related