Здравствуйте, я создаю pokedex, и теперь я пытаюсь получить информацию о pokemon, на которую нажали. так что я получаю URl
http://localhost:3000/#/pokemon/Bulbasaur
попытку записать информацию о Бульбасуре, чтобы отобразить ее:
import React, { Component } from 'react';
import Pokemons from '../pokemon/pokedex.json';
class PokePath extends Component {
constructor(props) {
super(props);
}
render() {
const {id, num, name} = this.state
return (
<div className="row">
<div className="col">
<h1>{Pokemons[this.props.id-1].name}</h1>
</div>
</div>
);
}
}
export default PokePath;
Здесь я получаю данные:
[{
"id": 1,
"num": "001",
"name": "Bulbasaur",
"img": "http://www.serebii.net/pokemongo/pokemon/001.png",
"type": [
"Grass",
"Poison"
],
]
Чтобы попасть на страницу бульбазаура, я сделал это:
return (
<div className = "row">{Pokemons.map((postDetail, id) => {
return(
<div className = "col-md-3 col-sm-6 mb-5">
<StyledLink to={`pokemon/${postDetail.name}`}>
<div className = "card">
<div className = "card-header">
<div>
<a key={id}>{postDetail.id}</a>
</div>
<div className="text-center">
<img src={postDetail.img} alt="new"/>
</div>
<div className="text-center">
<a key={id}>{postDetail.name}</a>
</div>
</div>
</div>
</StyledLink>
</div>);
})}
</div>
);