CODEWITHSUNDEEP
reactjs
Datsik
Datsik

Reputation: 14824

React anchor link delims not parsing data

I have a simple anchor / for loop:

        <ul className="user-list">
            {this.props.partymembers.map((user, i) => {
                return (
                    <li key={i} className="membername">
                        <a 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?

Upvotes: 0

Views: 40

Answers (1)

rossipedia
rossipedia

Reputation: 59377

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>

Upvotes: 1

Related Questions