score:5

Accepted answer
<LoadingButton
    className="button small primary pull-right"
    loading={this.state.loading[menu.id] || false}
    onClick={e => this.addToCart(e, menu.id)}
>

score:0

class cart extends Component {

    state = { loading:  []};

    addToCart = (e, id) => {
        let loading = this.state.loading.slice();
        loading.push(id);
        this.setState({
            loading
        })
    };

    render() {
        const { data } = this.props;

        return (
            <div>
            {data.map((catering,i) => {
                const { menus } = catering;
                return (
                    <Row>
                        {menus.map(menu => {
                            return this.state.loading.indexOf(menu.id) >= 0 ?
                                <Col xs={12} md={12} lg={6} key={menu.id} className="m-bottom-15">
                                    <Card style={{ height: '165px', border: 0, overflow: 'hidden' }}>
                                        <CardActions>
                                            <LoadingButton
                                                className="button small primary pull-right"
                                                loading={thi.state.loading || false}
                                                onClick={e => this.addToCart(e, menu.id)}
                                            >
                                                <MdAdd size={18} color={white} />
                                                <span className="font-14 font-400">Add to cart</span>
                                            </LoadingButton>
                                        </CardActions>
                                    </Card>
                                </Col>
                            :
                            /*Loading icon*/
                        })}
                    </Row>
                )
            })}
        )
    }
}

score:0

const [isLoading, setIsLoading] = useState([]);
<button
        type="button"
        disabled={isLoading[item.username]}
        className="btn btn-success btn-rounded btn-sm my-0"
        onClick={()=>activateOrDeactivate( item.activated,item.username)}
      >      {isLoading[item.username] && <i className="fa fa-circle-o-notch fa-spin"></i>}
      {isLoading[item.username]&& <span> Activating...</span>}
      {!isLoading[item.username]&& <span>Activate</span>}</button>


 const activateOrDeactivate = (valTrueOrFalse,newusername) => {
    let loading = isLoading.slice();
    loading[newusername] = true;
    setIsLoading(loading)
    let config = {
      headers: {
        Authorization: "Bearer " + state.token
      },
    };

    api.post(
      "process-activation",
      {
        activated: !valTrueOrFalse,
        username:newusername
      },
      config
    ).then(
      response => {
        getAllUsers()
        let loading = isLoading.slice();
        loading[newusername] = false;
        setIsLoading(loading)

Related Query

More Query from same tag