Este código con reactjs devuelve los datos de una API y los itera, lo que intento hacer sin éxito es generar un link dinámico por cada link del tipo "diets/id". Por ejemplo "diets/11"..."diets/12", ...
Tengo este código, me falla la parte de concatenar la URL con el ID
import React, { Component } from "react";
export default class ListItems extends Component {
constructor(props) {
super(props);
this.state = {
items : [],
isLoaded: false,
}
}
componentDidMount() {
fetch('http://api-diets.local/api/diets/user/2')
.then(res => res.json())
.then(json => {
console.log(json.data);
this.setState({
isLoaded:true,
items: json.data,
})
});
}
render() {
var {isLoaded, items} = this.state;
if (!isLoaded) {
return <div>Loading...</div>;
}
else {
var divStyle = {
color: 'red',
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};
return (
<div style={divStyle}>
<ul>
{items.map(item => (
<li key={item.id}>
Id : {item.id} - Name : {item.name}
<a href="diets/" + {item.id} >Ver </a>
</li>
))
}
</ul>
</div>
);
}
}
}
En concreto la parte que no me funciona es esta , donde intento concatenar "diets/" con el ID
<a href="diets/" + {item.id} >Ver </a>