Search code examples
reactjsreact-router

React render link containing a variable

I am trying to do the following:

<dbody>
    {projects.map(function(project, i++) { return (
    <tr key={i}>
        <td>
            {project.id}
        </td>
        <td>
            <a href='#/systemlist?projId={project.id}'>{project.name}</a>
        </td>
    </tr>
    );} )}
</dbody>

It should point to another component, using processor. It all works, except the {project.id} not being rendered as a value. How to do that? Everything else outside of href works.

Solution

  • There are couple ways how you can solve this issue

    1. String concatenation

      <a href={ '#/systemlist?projId=' + project.id }>{project.name}</a>

    2. ES2015 string templates 

      <a href={ `#/systemlist?projId=${project.id}` }>{project.name}</a>

    Example