1

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>

2 respuestas 2

1

Otra opción, más usada con el uso de ES6, es interpolar usando backticks(`)

<a href={`diets/${item.id}`}>Ver </a>
1
  • Muchas gracias muy amable. Funciona a la perfección.
    – ilernet
    Commented el 4 feb. 2020 a las 22:49
0

La concatenación tiene que ser así

<a href ={"diets/" + item.id}>link</a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.