How do i set a add-cart action to this component?

Viewed 31

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>

    )
}
}
0 Answers
Related