Uncaught TypeError: Object (…) is not a function

I am using Paystack component in my react app, and the the component requires passing a kind of object containing some required values below is the mother component for the one holding the paystackButton componenet.

 import React from 'react';
import DateRangePicker from 'react-bootstrap-daterangepicker';
import { getRangeOfDates } from 'helpers';
import { BookingModal } from './BookingModal';
import * as moment from 'moment';
import * as actions from 'actions';
import { ToastContainer, toast } from 'react-toastify';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import PScomponent from '../payments/paystack'
class Booking extends React.Component {

    constructor() {
        super();
        this.bookedOutDates = [];
        this.dateRef = React.createRef();
        this.state = {
            errors:[],
            proposedBooking: {
                startAt: '',
                endAt: '',
                guests: '',
                rooms: '',
                totalPrice: '',
                days:1
            },
            modal: {
                open: false
            }
        }
        
    }

    ............
  

    render() {

        const { rental, auth: {isAuth} } = this.props;
        const { startAt, endAt, guests, rooms, totalPrice, days } = 
        this.state.proposedBooking;
        const price = (parseInt(totalPrice)+5000) * parseInt(rooms)
        const publicKey = "pk_test_........."
        const amount = price * 100;
        console.log(days)
        const componentProps = {
        email:this.props.auth.email,
        amount,
        metadata: {
          userName : this.props.auth.username,
          phone:this.props.auth.contact,
        },
        publicKey,
        text: "Pay Now",
        onSuccess: (e) =>
          console.log(e),
        onClose: () => alert("Wait! Don't leave :("),
      }
        //console.log(this.props.auth)
        return (
            <div className='booking' style={{marginBottom: '10px', padding: '0', border:'none'}}>
            <ToastContainer />
                <h3 className='booking-price'>NG{rental.dailyRate} <span className='booking-per-night'>per night</span></h3>
                <hr></hr>
                { !isAuth &&
                    <Link className='btn btn-bwm btn-confirm btn-block' to={{pathname: '/login'}}>Login to book place!</Link>

                }
                { isAuth &&
                <React.Fragment>
                <div className='form-group'>
                    <label htmlFor='dates'>Dates</label>
                    <DateRangePicker onApply={this.handleApply} isInvalidDate={this.checkInvalidDates} opens='left' containerStyles={{ display: 'block' }}>
                        <input ref={this.dateRef} id='dates' type='text' className='form-control'></input>
                    </DateRangePicker>
                </div>
                <div className='form-group'>
                    <label htmlFor='guests'>Guests</label>
                    <input value={guests} onChange={(event) => { this.selectGuests(event) }} type='number' className='form-control' id='guests' aria-describedby='emailHelp' placeholder=''></input>
                </div>
                <div className='form-group'>
                    <label htmlFor='guests'>Rooms</label>
                    <input value={rooms} onChange={(event) => { this.selectRoomNum(event) }} type='number' className='form-control' id='Rooms' aria-describedby='emailHelp' placeholder=''></input>
                </div>
                <button disabled={!startAt || !endAt || !guests} onClick={() => { this.confirmProposedData() }} className='contact_btn'>PAY FOR RESERVATION</button>
                </React.Fragment>
                }
               
                {
                    this.state.modal.open &&  <PScomponent componentProps={componentProps}/>
                }
               
                
            </div>
        )
    }
  
}

function mapStateToProps(state){
    return {
        auth: state.auth
    }
}

export default connect(mapStateToProps)(Booking)

inside PScomponent component .

 import React from "react"
import  {PaystackButton}  from "react-paystack"
import "./P_Scomponent.css"


export default function PScomponent (props){
  const { componentProps } = props;
  //console.log(componentProps)
  return (
    <div className="P_Scomponent">
    
       <PaystackButton className="paystack-button" {...componentProps} />
        
    </div>
  )
}
//

but yet the browser still give me the following error i dont know where the error is coming from.

index.es.js:6 Uncaught TypeError: Object(...) is not a function

Answer

I finally got it working all I had to do was to downdate to a lower version of the react-paystack the version that worked for me is 2.0.2.

Advertisement

Answer