Breaking News: Grepper is joining You.com. Read the official announcement!

onclick how to post card data to api

Elegant Echidna answered on April 22, 2021 Popularity 1/10 Helpfulness 1/10

answer onclick how to post card data to api

onclick how to post card data to api

Comment

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;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: api card javascript onclick post

Link to this answer
Share Copy Link

Contributed on Apr 22 2021

Elegant Echidna

0 Answers Avg Quality 2/10

onclick how to post card data to api

Contents

More Related Answers

onclick how to post card data to api

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.