onClick Кнопка Text Change для конкретной карты с использованием идентификатора из REST API

Question

Здесь я пытаюсь выполнить интеграцию для кнопки RSVP внутри карты, при нажатии на конкретную карту текст внутри кнопки RSVP должен быть изменен на «Идет» для конкретного идентификатора пользователя, приведенного ниже.эта проблема ... Здесь я пытаюсь выполнить интеграцию для кнопки RSVP внутри карты, при нажатии на конкретную карту текст внутри кнопки RSVP должен быть изменен на «Идет» для конкретного идентификатора пользователя, приведенного ниже.я с этой проблемой ... Здесь я пытаюсь сделать интеграцию для кнопки RSVP внутри карты, при нажатии на конкретную карту текст внутри кнопки RSVP должен быть изменен на «Идет» для конкретного идентификатора пользователя ниже, это мой прикрепленныйпожалуйста, помогите мне с этой проблемой ...

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;

Answer 1

Вы можете сделать это так.Передайте идентификатор встречи в метод handleClick и в функции-обработчике события handleClick установите этот идентификатор mertup в состояние и сравните это состояние, чтобы соответственно сместить имя

Замените приведенный ниже код кнопки в своем компоненте

   <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>

Замените нижеприведенную функцию в вашем компоненте

    handleClick(id) {
        this.setState({
           meetUpId: id
        });
    }

Установите состояние meetUpId в 0 в конструкторе.При нажатии на конкретную карту будет отображаться текст GOING, соответствующий ее идентификатору