У меня есть API запрос, как мне сделать так, чтобы к определённому айди выводилась нужная карточка?
Пробовал добавить к API url ${id}, но не получилось, нужна помощь.
Мой код:
// Default.js
import React from "react";
import { Link } from "react-router-dom";
class Details extends React.Component {
// Constructor
constructor(props) {
super(props);
this.state = {
items: [],
};
}
componentDidMount = () => {
return fetch(`https://jsonplaceholder.typicode.com/todos`)
.then((res) => res.json())
.then((json) => {
this.setState({
items: json,
});
});
};
render() {
const { items } = this.state;
return (
<div>
{items.map((item) => {
return (
<div key={item.id}>
<div>
<h1>Details Page</h1>
<p>
<strong>Status:</strong> {item.status}
</p>
<p>
<strong>ID:</strong> {item.id}
</p>
<p>
<strong>Title:</strong> {item.title}
</p>
<p>
<strong>UserID:</strong> {item.userId}
</p>
</div>
</div>
);
})}
<div>
<Link target="self" to="/">
Home
</Link>
</div>
</div>
);
}
}
export default Details;
// App.js
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import './App.css';
import Home from '../pages/Home';
import Details from '../pages/Details';
function App() {
return (
<div className="App">
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/details/:id' component={Details} />
</Switch>
</div>
);
}
export default App;
Результат при переходе по http://localhost:3000/details/1
Details Page
Status:
ID: 1
Title: delectus aut autem
UserID: 1
Details Page
Status:
ID: 2
Title: quis ut nam facilis et officia qui
UserID: 1
Details Page
Status:
ID: 3
Title: fugiat veniam minus
UserID: 1
Details Page
Status:
ID: 4
Title: et porro tempora
UserID: 1
Details Page
Status:
ID: 5
Title: laboriosam mollitia et enim quasi adipisci quia provident illum
UserID: 1
Details Page
Status:
ID: 6
Title: qui ullam ratione quibusdam voluptatem quia omnis
UserID: 1
Details Page
Status:
ID: 7
Title: illo expedita consequatur quia in
UserID: 1
Details Page
Status:
ID: 8
Title: quo adipisci enim quam ut ab
UserID: 1
Details Page
Status:
ID: 9
Title: molestiae perspiciatis ipsa
UserID: 1
Details Page
Status:
ID: 10
Title: illo est ratione doloremque quia maiores aut
UserID: 1
Details Page
Status:
ID: 11
Title: vero rerum temporibus dolor
UserID: 1
Details Page
Status:
ID: 12
Title: ipsa repellendus fugit nisi
UserID: 1
Details Page
Status:
ID: 13
Title: et doloremque nulla
UserID: 1
Details Page
Status:
ID: 14
Title: repellendus sunt dolores architecto voluptatum
UserID: 1
Details Page
Status:
ID: 15
Title: ab voluptatum amet voluptas
UserID: 1
Details Page
Status:
ID: 16
Title: accusamus eos facilis sint et aut voluptatem
UserID: 1
Details Page
Status:
ID: 17
Title: quo laboriosam deleniti aut qui
UserID: 1
Details Page
Status:
ID: 18
Title: dolorum est consequatur ea mollitia in culpa
UserID: 1
Details Page
Status:
ID: 19
Title: molestiae ipsa aut voluptatibus pariatur dolor nihil
UserID: 1
Details Page
Status:
ID: 20
Title: ullam nobis libero sapiente ad optio sint
UserID: 1
Details Page
Status:
ID: 21
Title: suscipit repellat esse quibusdam voluptatem incidunt
UserID: 2
Details Page
Status:
ID: 22
Title: distinctio vitae autem nihil ut molestias quo
UserID: 2
Details Page
Status:
ID: 23
Title: et itaque necessitatibus maxime molestiae qui quas velit
UserID: 2
Details Page
Status:
ID: 24
Title: adipisci non ad dicta qui amet quaerat doloribus ea
UserID: 2
Details Page
Status:
ID: 25
Title: voluptas quo tenetur perspiciatis explicabo natus
UserID: 2
Details Page
Status:
ID: 26
Title: aliquam aut quasi
UserID: 2
Details Page
Status:
ID: 27
Title: veritatis pariatur delectus
UserID: 2
Details Page
Status:
ID: 28
Title: nesciunt totam sit blanditiis sit
UserID: 2
Details Page
Status:
ID: 29
Title: laborum aut in quam
UserID: 2
Details Page
Status:
ID: 30
Title: nemo perspiciatis repellat ut dolor libero commodi blanditiis omnis
UserID: 2
Details Page
Status:
ID: 31
Title: repudiandae totam in est sint facere fuga
UserID: 2
Details Page
Status:
ID: 32
Title: earum doloribus ea doloremque quis
UserID: 2
Details Page
Status:
ID: 33
Title: sint sit aut vero
UserID: 2
Details Page
Status:
ID: 34
Title: porro aut necessitatibus eaque distinctio
UserID: 2
Details Page
Status:
ID: 35
Title: repellendus veritatis molestias dicta incidunt
UserID: 2
Details Page
Status:
ID: 36
Title: excepturi deleniti adipisci voluptatem et neque optio illum ad
UserID: 2
Details Page
Status:
ID: 37
Title: sunt cum tempora
UserID: 2
Details Page
Status:
ID: 38
Title: totam quia non
UserID: 2
Details Page
Ожидаемый результат при переходе по http://localhost:3000/details/1 :
Details Page
Status:
ID: 1
Title: delectus aut autem
UserID: 1