У меня выводятся карточки с покемонами при клике на которые мне показывает больше информации о покемоне. У меня всё работает только больше информации о покемоне выводится один под другим а мне нужно чтобы предыдущий исчезал и новый появлялся. Как я могу удалить уже отрендеренжий компонент с детальной информацией и показать новый при новом клике.
class PokemonListCard extends React.Component{
constructor(props){
super(props);
this.state = {
pokemonImgTemplate: "https://pokeres.bastionbot.org/images/pokemon/{id}.png",
pokemonList: [],
currentPage: 0,
apiTemplateUrl: "https://pokeapi.co/api/v2/pokemon?offset=currentPage&limit=12",
pokemonValue: []
}
this.loadMore();
}
loadMore=(newCurrentPage)=>{
this.setState({
currentPage: this.state.currentPage + 1
})
let currentPage = newCurrentPage;
let num = 12 * currentPage;
let apiTemplateUrl = this.state.apiTemplateUrl;
let apiUrl = apiTemplateUrl.replace("currentPage",num);
fetch(apiUrl)
.then((response) => {
return response.json();
})
.then((listPokemons) => {
listPokemons.results.forEach((aboutPokemon) => {
let aboutPokemonUrl = aboutPokemon.url;
fetch(aboutPokemonUrl)
.then((response) => {
return response.json();
})
.then((listEachPokemon) => {
this.setState(prevState => ({
pokemonList: [...prevState.pokemonList, listEachPokemon]
}))
})
})
})
}
componentWillUnmount() {
DataSource.removeChangeListener(this.handleChange);
}
loadAboutInfo=(pokemonValue,pockemonImg)=>{
this.setState(prevState => ({
pokemonValue:[...prevState.pokemonValue, pokemonValue],
pockemonImg
}))
}
render() {
return (
<div className="wrapper">
<div className="pokemonlist__inner__cards">
<div className="pokemonlist__cards">
{this.state.pokemonList.map((value,index)=>{
let pokemonImgTemplate = this.state.pokemonImgTemplate;
let pokemonId = value.id;
let pockemonImg = pokemonImgTemplate.replace('{id}',pokemonId);
return(
<div className="pokemonlist__card" key={index} onClick={()=>this.loadAboutInfo(value,pockemonImg)}>
<PokemonImage
pockemonImg={pockemonImg}
/>
<PokemonName
pokemonName={value.name}
/>
<PokemonTypes
pokemonTypes={value.types}
/>
</div>
)
})}
</div>
<PokemonLoadMore
loadMore={this.loadMore}
currentPage={this.state.currentPage}
/>
</div>
<PokemonAbout
pokemonValue={this.state.pokemonValue}
pockemonImg={this.state.pockemonImg}
/>
</div>
);
}
}
Компонент который выводит карточку с дополнительной информацией
render() {
return (
<div className="pokemon__about">
{this.props.pokemonValue.map((value,index)=>{
return(
<div className="pokemon__about__inner" key={index}>
<img src={this.props.pockemonImg} alt=""/>
<h1>{value.name}</h1>
</div>
)
})}
</div>
);
}
}
Я пробовал сделать с помощью componentWillUnmount()
но наверное делал неправильно.
Спасибо большое за ответ