Ad

React Anchor Link Delims Not Parsing Data

- 1 answer

I have a simple anchor / for loop:

        <ul className="user-list">
            {this.props.partymembers.map((user, i) => {
                return (
                    <li key={i} className="membername">
                        <a target="_blank" rel="nofollow noreferrer" href="/friends/add/{user.id}">{user.username}</a>
                    </li>
                )
            })}
        </ul>

But the link just shows up as /friends/add/{user.id} instead of /friends/add/141513531 am I missing something here? Thanks. Username shows fine, but not inside the ""

I managed to solve it by doing

<li key={i} className="membername">
  {React.createElement('a', { href: '/friends/add'+user.id}, user.username)}
</li>

but that almost seems hacky, is there a better way to do it?

Ad

Answer

The whole attribute needs to be either a string or an expression. So something like this:

<a href={'/friends/add/' + user.id}>{user.username}</a>

If you're using babel to transpile ES6, you can use template strings:

<a href={`/friends/add/${user.id}`>{user.username}</a>
Ad
source: stackoverflow.com
Ad