For loop containing links inside a render in React

Question

I have the following vb.net code which I must convert into React:

For i As Integer = 0 To List.Count - 1

    MyList.AppendFormat("<li><a href=""some_url/page?id={0}""><i class=""fa fa-cloud""></i> {1}</a></li>", List(i).ListId, List(i).ListLocationName)

Next

So far I done this code:

render() {
     return (
         <div>
           {
             <ul className="this-nav">

               {this.props.list.map((value, index)=> <li><a href={"some_url/page?id=" + index}></a></li>)

               }

            </ul>
           } 
        </div>
    );

}

Is it a better way to do it? I got this message in console:

Each child in an array or iterator should have a unique "key" prop. Check the render method of MyList.

One thing though, in your map callback function, you have 'value' as a parameter but it's never used, is that intentional? — Finbarr O'B, Jul 21 '17 at 08:52
check this answer [When {} are required in react](https://stackoverflow.com/questions/43904825/what-do-curly-braces-mean-in-jsx-react) and [**React DOC**](https://facebook.github.io/react/docs/introducing-jsx.html#embedding-expressions-in-jsx) about how to put expressions inside JSX. — Mayank Shukla, Jul 21 '17 at 08:54
Possible duplicate of [loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — ZEE, Jul 21 '17 at 09:07

score 2 · Answer 1 · answered Jul 21 '17 at 08:51

Try this one:

render() {
 return (
     <div>
         <ul className="this-nav">
           {
             this.props.list.map((value, index)=> { return (<li key={`index-${index}`}><a href={ `some_url/page?id=${index}` }></a></li>); })
           }
        </ul>
    </div>
  );
}

You have redundant braces, and also it's cleaner to use string interpolation for the 'li' key (needed for react) and href property

score 2 · Answer 2 · answered Jul 21 '17 at 08:56

I like to make the key the index of the map array straight up so i don't have to think about it later.

render() {
     return (
         <div>
             <ul className="this-nav">
               {this.props.list.map((value, index)=> {
                  return (
                    <li key={index}><a href={"some_url/page?id=" + index}></a></li>
                  )
                }
               }
            </ul>
        </div>
    );
}

For loop containing links inside a render in React

2 Answers2