I'm setting up a project for an online pokemon store and everything is almost ready, I'm having difficulties just building an "add to cart" button that throws the information sought straight to a cart fixed on the side of the screen that I built it, can someone give me a light on how to search, for example {this.state.name} and put it into a market cart Component?
export default class PokemonCard extends Component {
state ={
name:'',
imageUrl:'',
pokemonIndex:''
};
componentDidMount() {
const { name, url } = this.props;
const pokemonIndex = url.split('/')[url.split('/').length - 2];
const imageUrl = `https://github.com/PokeAPI/sprites/blob/master/sprites/pokemon/${pokemonIndex}.png?raw=true`
this.setState({name: name, imageUrl: imageUrl, pokemonIndex: pokemonIndex})
}
render() {
return (
<div className='col-md-3 col-sm-6 mb-5'>
<div className='poke-item'>
<a onClick={addBasket} href='#'>
<div className='poke-item-img'>
<Sprite id='poke_item' className='card-img-top rounded mx-auto mt-2'
src={this.state.imageUrl}>
</Sprite>
</div>
<div className='poke-item-add'>+</div>
</a>
<div className="poke-item--price">R$ 499</div>
<div className="poke-item--name">{this.state.name}</div>
</div>
</div>
)
}
}