onclick how to post card data to api
import React, { Component } from 'react'; import styles from './meetups.css'; import meetup_banner from '../../assets/images/scin_imgs/topbanner.jpg'; import Header from '../../containers/Header'; class MeetUps extends Component { constructor(props){ super(props); this.state={ meetUpId: 0, meetups:[] }; this.handleClick = this.handleClick.bind(this); } componentDidMount(){ this.getMeetups() } handleClick(id) { this.setState({ meetUpId: id }); } getMeetups(){ fetch('http://206.189.130.109:8000/api/v1/meetups/') .then(res => res.json()) .then(data => this.setState({meetups:data.results})) } handleSubmit = event => { event.preventDefault(); //console.log(this.state) fetch('http://206.189.130.109:8000/api/v1/meetups/rsvp/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ "id":this.state.meetups.id, "meetup_type": "meetup", "status": true, "meetup": 1, "user": 2 }), }).then(rsvp => { console.log(rsvp); // alert(rsvp.message) }).catch(err => err); } render() { // console.log(this.state.meetups) return ( <div id={styles.meetups_body}> <Header/> <div><img src={meetup_banner} className={styles.meet_bg} alt="meetups"></img> </div> <div className="col-md-12"> <div className="row"> {this.state.meetups.map((meetup)=> <div className="col-md-4" key={meetup.id}> <div className={styles.card} style={{ marginBottom: '20px' }}> <img className="card-img-top" src={meetup.image_url} alt="Card" style={{ width: '100%' }} /> <div align="center"> <button type="button" className="btn" id={styles.free}>{meetup.cost}</button> </div> <form onSubmit={this.handleSubmit}><div align="center" > <button key={meetup.id} type="submit" onClick={() => this.handleClick(meetup.id)} className="btn" id={styles.rsvp_button} >{this.state.meetUpId == meetup.id ? 'GOING' : 'RSVP'}. </button> </div></form> <div className="card-body" style={{padding:'10px'}}> <div className="col=md-12"> <div className="row"> <div className="col-md-3" align="center"> <h4 style={{ color: '#8cc63f', fontWeight: '600' }}>{meetup.meetup_date}</h4><br /> </div> <div className="col-md-9"> <h5 className="card-title" style={{fontWeight:'600'}}>{meetup.title}</h5> <h6>{meetup.time}</h6> <br /> <h6>{meetup.venue}</h6> <p className="card-text" dangerouslySetInnerHTML={{__html:meetup.content}} id={styles.meetup_content} style={{ textOverflow:'elipsis', width:'100%', whiteSpace:'nowrap',overflow:'hidden' }}></p> <a href={`MeetupsDetail/${meetup.id}`} className="btn" id={styles.btn_outline_warning}>Learn More</a> <br /> </div> </div> </div> <div className="meetup_footer" > <p >{meetup.hash_tag} </p> {/* <i className="fas fa-share-alt " id={styles.share_icon} style={{ float: 'right' }}></i> */} </div> </div> </div> </div> )} </div> </div> </div> ) } } export default MeetUps;
Source: stackoverflow.com