Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

shu Chan
shu Chan
2,951 Points
Posted by shu Chan
shu Chan
2,951 Points

How do I generate a list of links in React?

Hello! I am creating a list of links on the side bar of my app using React and I need to figure out a way to not only generate a dynamic list of names which I pull from a rails back end but also make it so that each name links to it's specific id.

This is currently what I have 

            this.setState({ SidebarCircleNames: response.data.map(
                circle => circle.name
            )}),
            this.setState({ SidebarCircleID: response.data.map(
                circle => circle.id
            )});

This is how I got the name and id from pulling from the back using an Axios Get request

I am able to show the list of names like by doing this 

  render() {
    return (
        <div className="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
          <div className="affix-top" data-spy="affix" data-offset-top="45" data-offset-bottom="90">

            <h3 id="sidebarLabels"> Your circles </h3>
            <ul className="nav" id="sidebar-nav">
          {this.state.SidebarCircleNames.map((item, index) => (
       <li className='indent' key={index}><Link onClick={(event) => this.handleClickGotoCircle(event)}>{item}</Link></li>
    ))}

I can't think of a way to make it so that the link for each one returns its own specific circle.id so i can pass it onto another component to render details about it

2 Answers

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

The id would be accessible inside the map call as this.state.SidebarCircleID[index] since the two arrays are in the same order.

shu Chan
shu Chan
2,951 Points
shu Chan
shu Chan
2,951 Points

Im sorry I don’t quite understand, how would I access it through the map call? I want to make it so that I can make the names I generate into a link and have that link return the circle ID it belongs to. Can you show me a way to do that? I'm still stuck

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

I thought you already got the circle ID through the previous axios request. In that case you don't need to request it again. Let me assume your Link component has the logic inside it necessary to convert the id to a link address. You would just pass the circleId as a prop. If you are using React Router's Link component I'd suggest using a custom component to wrap it and handle converting the id to a url.

{this.state.SidebarCircleNames.map((item, index) => (
  <li className='indent' key={index}>
    <Link
      circleId={this.state.SidebarCircleID[index]}
      onClick={(event) => this.handleClickGotoCircle(event)}>
      {item}
    </Link>
  </li>
)