I'm trying to add test coverage for this React component and I'm getting this message on the component "else path is not taken" when there is no else after if statement.
Below is my component with jest warning. Can someone help to cover this part?
function CustomerSatisfaction(props: FeedbackProps) {
const [status, setStatus] = useState<
'idle' | 'active' | 'pending' | 'success' | 'error'
>('idle');
const handleSubmit = useCallback(
async (smileyType: string, options: Record<string, string>) => {
setStatus('pending');
try {
const result = await fetchWithError(() => {
setStatus('error');
})('/pub/feedback/feedbacks', 'POST', {
surveyType: 'service',
smileyType,
comments: options.comment,
ratings: {
clearness: options['customer_satisfaction.clear'],
ease: options['customer_satisfaction.easy'],
speed: options['customer_satisfaction.fast'],
performance: options['customer_satisfaction.perf'],
},
pageUrl: window.location.href,
serviceId: props.serviceId,
productId: props.productId,
});
**(else path not taken)** if (result.success) {
setStatus('success');
}
} catch (e) {
setStatus('error');
}
},
[],
);
return (
<CustomerSatisfactionComponent
i18n={props.i18n}
status={status}
onSubmit={handleSubmit}
/>
);
}
Guys if someone faces this issue, here is the solution for my case
it('should render failure state', async () => {
const component = shallow(
<CustomerSatisfaction
i18n={() => ({})}
serviceId="123"
productId="123"
/>,
);
(fetchWithError as jest.Mock).mockReturnValue(
jest.fn().mockResolvedValue({
success: false,
}),
);
const onSubmit: any =
component.find(CustomerSatisfactionComponent).prop('onSubmit') ||
(() => {});
await onSubmit('test', {});
expect(component).toMatchSnapshot();
});
Related
I was following the documentation to implement google map on demand rides and deliveries solution (ODRD) here.
And my Map component in React:
const MapComponent = ({ styles }) => {
const ref = useRef(null);
const tripId = useRef<string>('');
const locationProvider =
useRef<google.maps.journeySharing.FleetEngineTripLocationProvider>();
const [error, setError] = useState<string | undefined>();
const mapOptions = useRef<MapOptionsModel>({
showAnticipatedRoutePolyline: true,
showTakenRoutePolyline: true,
destinationMarker: ICON_OPTIONS.USE_DEFAULT,
vehicleMarker: ICON_OPTIONS.USE_DEFAULT,
});
const [trip, setTrip] = useState<TripModel>({
status: null,
dropOff: null,
waypoints: null,
});
const setTripId = (newTripId: string) => {
tripId.current = newTripId;
if (locationProvider.current) locationProvider.current.tripId = newTripId;
};
const setMapOptions = (newMapOptions: MapOptionsModel) => {
mapOptions.current.showAnticipatedRoutePolyline =
newMapOptions.showAnticipatedRoutePolyline;
mapOptions.current.showTakenRoutePolyline =
newMapOptions.showTakenRoutePolyline;
mapOptions.current.destinationMarker = newMapOptions.destinationMarker;
mapOptions.current.vehicleMarker = newMapOptions.vehicleMarker;
setTripId(tripId.current);
};
const authTokenFetcher = async () => {
const response = await fetch(
`${PROVIDER_URL}/token/consumer/${tripId.current}`
);
const responseJson = await response.json();
return {
token: responseJson.jwt,
expiresInSeconds: 3300,
};
};
useEffect(() => {
locationProvider.current =
new google.maps.journeySharing.FleetEngineTripLocationProvider({
projectId: PROVIDER_PROJECT_ID,
authTokenFetcher,
tripId: tripId.current,
pollingIntervalMillis: DEFAULT_POLLING_INTERVAL_MS,
});
locationProvider.current.addListener(
'error',
(e: google.maps.ErrorEvent) => {
setError(e.error.message);
}
);
locationProvider.current.addListener(
'update',
(
e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent
) => {
if (e.trip) {
setTrip({
status: e.trip.status,
dropOff: e.trip.dropOffTime,
waypoints: e.trip.remainingWaypoints,
});
setError(undefined);
}
}
);
const mapViewOptions: google.maps.journeySharing.JourneySharingMapViewOptions =
{
element: ref.current as unknown as Element,
locationProvider: locationProvider.current,
anticipatedRoutePolylineSetup: ({ defaultPolylineOptions }) => {
return {
polylineOptions: defaultPolylineOptions,
visible: mapOptions.current.showAnticipatedRoutePolyline,
};
},
takenRoutePolylineSetup: ({ defaultPolylineOptions }) => {
return {
polylineOptions: defaultPolylineOptions,
visible: mapOptions.current.showTakenRoutePolyline,
};
},
destinationMarkerSetup: ({ defaultMarkerOptions }) => {
if (
mapOptions.current.destinationMarker !== ICON_OPTIONS.USE_DEFAULT
) {
defaultMarkerOptions.icon =
mapOptions.current.destinationMarker.icon;
}
return { markerOptions: defaultMarkerOptions };
},
vehicleMarkerSetup: ({ defaultMarkerOptions }) => {
if (mapOptions.current.vehicleMarker !== ICON_OPTIONS.USE_DEFAULT) {
// Preserve some default icon properties.
if (defaultMarkerOptions.icon) {
defaultMarkerOptions.icon = Object.assign(
defaultMarkerOptions.icon,
mapOptions.current.vehicleMarker.icon
);
}
}
return { markerOptions: defaultMarkerOptions };
},
};
const mapView = new google.maps.journeySharing.JourneySharingMapView(
mapViewOptions
);
// Provide default zoom & center so the map loads even if trip ID is bad or stale.
mapView.map.setOptions(DEFAULT_MAP_OPTIONS);
}, []);
return (
<div style={styles.map} ref={ref} />
);
};
And my App component like this:
import React from 'react';
import { Wrapper, Status } from '#googlemaps/react-wrapper';
import MapComponent from './src/components/MapComponent';
import { API_KEY } from './src/utils/consts';
const render = (status: Status) => <Text>{status}</Text>;
const App = () => {
return (
<Wrapper
apiKey={API_KEY}
render={render}
version={'beta'}
// #ts-ignore
libraries={['journeySharing']}
>
<MapComponent />
</Wrapper>
);
};
Everything will works fine but I do not know how to destroy the map when component unmount in React. That's why my App always call API update the trip info.
I was tried to use clean up function in useEffect:
useEffect(() => {
locationProvider.current =
new google.maps.journeySharing.FleetEngineTripLocationProvider({
projectId: PROVIDER_PROJECT_ID,
authTokenFetcher,
tripId: tripId.current,
pollingIntervalMillis: DEFAULT_POLLING_INTERVAL_MS,
});
locationProvider.current.addListener(
'error',
(e: google.maps.ErrorEvent) => {
setError(e.error.message);
}
);
const updateEvent = locationProvider.current.addListener(
'update',
(
e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent
) => {
if (e.trip) {
setTrip({
status: e.trip.status,
dropOff: e.trip.dropOffTime,
waypoints: e.trip.remainingWaypoints,
});
setError(undefined);
}
}
);
const mapViewOptions: google.maps.journeySharing.JourneySharingMapViewOptions =
{
element: ref.current as unknown as Element,
locationProvider: locationProvider.current,
anticipatedRoutePolylineSetup: ({ defaultPolylineOptions }) => {
return {
polylineOptions: defaultPolylineOptions,
visible: mapOptions.current.showAnticipatedRoutePolyline,
};
},
takenRoutePolylineSetup: ({ defaultPolylineOptions }) => {
return {
polylineOptions: defaultPolylineOptions,
visible: mapOptions.current.showTakenRoutePolyline,
};
},
destinationMarkerSetup: ({ defaultMarkerOptions }) => {
if (
mapOptions.current.destinationMarker !== ICON_OPTIONS.USE_DEFAULT
) {
defaultMarkerOptions.icon =
mapOptions.current.destinationMarker.icon;
}
return { markerOptions: defaultMarkerOptions };
},
vehicleMarkerSetup: ({ defaultMarkerOptions }) => {
if (mapOptions.current.vehicleMarker !== ICON_OPTIONS.USE_DEFAULT) {
// Preserve some default icon properties.
if (defaultMarkerOptions.icon) {
defaultMarkerOptions.icon = Object.assign(
defaultMarkerOptions.icon,
mapOptions.current.vehicleMarker.icon
);
}
}
return { markerOptions: defaultMarkerOptions };
},
};
const mapView = new google.maps.journeySharing.JourneySharingMapView(
mapViewOptions
);
// Provide default zoom & center so the map loads even if trip ID is bad or stale.
mapView.map.setOptions(DEFAULT_MAP_OPTIONS);
return () => {
mapView.map = null // or mapView.map.setmap(null);
google.maps.event.removeListener(updateEvent);
};
}, []);
But it was not working. Hope anyone can help me find out this. Thanks
I'm trying to test the component below using mock axios, however, it looks like the components are not rendered as expected, could someone help me on that? I have been stuck for quite a while. The component is fetching an api every 1 second.
const RealtimePrice = () => {
var [cryptoFeed, setCryptoFeed] = useState<cryptoFeed>([]);
var [currency, setCurrency] = useState(currencyList[0]);
var [cryptoSearch, setCryptoSearch] = useState("");
const url = `https://api.coingecko.com/api/v3/coins/markets?ids=${ids}&vs_currency=${currency}`;
const intervalRef = useRef<NodeJS.Timer>();
const onCurrencyChangeHandler = useCallback((newValue: string) => {
setCurrency(newValue);
}, []);
const onCryptoSearchChangeHandler = useCallback((newValue: string) => {
setCryptoSearch(newValue);
}, []);
useEffect(() => {
const getCryptoFeed = () => {
axios.get(url).then((response: any) => {
if (response.data) {
console.debug("The state is set");
setCryptoFeed(response.data);
} else {
console.debug("The state is not set");
setCryptoFeed([]);
}
});
};
getCryptoFeed();
intervalRef.current = setInterval(getCryptoFeed, 1000);
return () => {
clearInterval(intervalRef.current);
};
}, [url]);
const priceBlocks = cryptoFeed
.filter((crypto) =>
crypto.name.toLowerCase().includes(cryptoSearch.toLowerCase())
)
.map((crypto: any) => {
return (
<PriceBlock
key={crypto.id}
id={crypto.id}
name={crypto.name}
price={crypto.current_price}
volume={crypto.total_volume}
change={crypto.price_change_24h}
></PriceBlock>
);
});
return (
<div className={styles.container}>
<div className={styles["header-section"]}>
<h1>Cryptocurrency Realtime Price</h1>
<div className="input-group">
<Selectbox
onChange={onCurrencyChangeHandler}
defaultOption={currencyList[0]}
options={currencyList}
/>
<Inputbox
placeHolder="Enter crypto name"
onChange={onCryptoSearchChangeHandler}
/>
</div>
</div>
<div className={styles.priceblocks}>{priceBlocks}</div>
</div>
);
};
The test is the defined as the following, findByText gives error, it couldn't find the element.
import { render, screen } from "#testing-library/react";
import RealtimePrice from "../RealtimePrice";
describe("Realtime Price", () => {
it("should render the Bitcoin price block", async () => {
render(<RealtimePrice />);
const pb = await screen.findByText("Bitcoin");
expect(pb).toBeInTheDocument();
});
});
And in package.json I have set
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}"
],
"resetMocks": false
}
In src/mocks/axios.js
const mockGetResponse = [
{
id: "bitcoin",
name: "Bitcoin",
price: 20000,
volume: 12004041094,
change: -12241,
},
{
id: "solana",
name: "Solana",
price: 87,
volume: 200876648,
change: 122,
},
];
const mockResponse = {
get: jest.fn().mockResolvedValue(mockGetResponse),
};
export default mockResponse;
With our comments seems clear the issue is that mock is not returning a proper response.data (that's why u are setting an empty array as the state)
Try doing:
const mockResponse = {
get: jest.fn().mockResolvedValue({data: mockGetResponse}),
};
I have this update form for a place and I fetch its data from the backend to add initial inputs in useEffect but I got this error
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
I know the problem is related to unmounted the component before update the state but I try many solutions but not working. Anyone have an idea how to fix that
const UpdatePlace = () => {
const placeId = useParams().pId;
const [loadedPlace, setLoadedPlace] = useState();
// const [isLoading, setIsLoading] = useState(true);
const { error, sendRequest, clearError } = useHttpClient();
const [isLoading, formState, inputHandler, setFormData] = useForm(
{
title: {
value: "",
isValid: false,
},
description: {
value: "",
isValid: false,
},
},
true
);
useEffect(() => {
const fetchPlace = async () => {
try {
const res = await sendRequest(`/api/places/${placeId}`);
await setLoadedPlace(res.data.place);
setFormData(
{
title: {
value: res.data.place.title,
isValid: true,
},
description: {
value: res.data.place.description,
isValid: true,
},
},
true
);
} catch (err) {}
};
fetchPlace();
}, [sendRequest, placeId, setFormData]);
if (!loadedPlace && !error) {
return (
<div className="center" style={{ maxWidth: "400px", margin: "0 auto" }}>
<Card>
<h2>No place found!</h2>
</Card>
</div>
);
}
const placeUpdateSubmitHandler = (e) => {
e.preventDefault();
console.log(formState.inputs, formState.isFormValid);
};
return (
<>
{isLoading ? (
<LoadingSpinner asOverlay />
) : error ? (
<ErrorModal error={error} onClear={clearError} />
) : (
<>
<Title label="Update place" />
<form className="place-form" onSubmit={placeUpdateSubmitHandler}>
<Input
element="input"
type="text"
id="title"
label="Update title"
validators={[VALIDATOR_REQUIRE()]}
errorText="please enter valid title"
onInput={inputHandler}
initialValue={loadedPlace.title}
initialValid={true}
/>
<Input
element="textarea"
id="description"
label="Update description"
validators={[VALIDATOR_REQUIRE(), VALIDATOR_MINLENGTH(5)]}
errorText="please enter valid description (min 5 chars) "
onInput={inputHandler}
initialValue={loadedPlace.description}
initialValid={true}
/>
<Button type="submit" disabled={!formState.isFormValid}>
Update place
</Button>
</form>
</>
)}
</>
);
};
You can use useEffect with [] with cleanup function, as it will execute last one like this:
useEffect(() => {
return () => {
console.log('cleaned up');
}
},[])
This error means that your request completes after you have navigated away from that page and it tries to update a component that is already unmounted. You should use an AbortController to abort your request. Something like this should work:
useEffect(() => {
const controller = new AbortController();
const signal = controller.signal;
const fetchPlace = async () => {
try {
const res = await fetch(`/api/places/${placeId}`, { signal }).then(response => {
return response;
}).catch(e => {
console.warn(`Fetch 1 error: ${e.message}`);
});
await setLoadedPlace(res.data.place);
setFormData(
{
title: {
value: res.data.place.title,
isValid: true,
},
description: {
value: res.data.place.description,
isValid: true,
},
},
true
);
} catch (err) {}
};
fetchPlace();
return () => {
controller.abort();
};
}, [sendRequest, placeId, setFormData]);
Edit: Fix undefined obj key/value on render
The above warning will not stop your component from rendering. What would give you an undefined error and prevent your component from rendering is how you initiate the constant loadedPlace. You initiate it as null but you use it as an object inside your Input initialValue={loadedPlace.title}. When your component tries to do the first render it reads the state for that value but fails to locate the key and breaks.
Try this to fix it:
const placeObj = {
title: {
value: '',
isValid: true,
},
description: {
value: '',
isValid: true,
};
const [loadedPlace, setLoadedPlace] = useState(placeObj);
Always make sure that when you use an object you don't use undefined keys upon render.
I'm calling a function by finding the button with the data-testid with "show_more_button"
<OurSecondaryButton test={"show_more_button"} onClick={(e) => showComments(e)} component="span" color="secondary">
View {min !== -1 && min !== -2 ? min : 0} More Comments
</OurSecondaryButton>
showComments
const showComments = (e) => {
e.preventDefault();
if (inc + 2 && inc <= the_comments) {
setShowMore(inc + 2);
setShowLessFlag(true);
} else {
setShowMore(the_comments);
}
};
which renders this
const showMoreComments = () => {
return filterComments.map((comment, i) => (
<div data-testid="comment-show-more" key={i}>
<CommentListContainer ref={ref} comment={comment} openModal={openModal} handleCloseModal={handleCloseModal} isBold={isBold} handleClickOpen={handleClickOpen} {...props} />
</div>
));
};
and upon executing fireEvent the function gets called which is good but, im getting the error:
TestingLibraryElementError: Found multiple elements by:
[data-testid="comment-show-more"]
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
There is only one data-testid with "comment-show-more", i doubled checked, this function must be getting triggered multiple times in the same test i guess, Im not sure..
CommentList.test.tsx
it("should fire show more action", () => {
const { getByTestId } = render(<CommentList {...props} />);
const showMore = getByTestId("show_more_button");
fireEvent.click(showMore);
expect(getByTestId("comment-show-more").firstChild).toBeTruthy();
});
CommentList.test.tsx (full code)
import "#testing-library/jest-dom";
import React, { Ref } from "react";
import CommentList from "./CommentList";
import { render, getByText, queryByText, getAllByTestId, fireEvent } from "#testing-library/react";
import { Provider } from "react-redux";
import { store } from "../../../store";
const props = {
user: {},
postId: null,
userId: null,
currentUser: {},
ref: {
current: undefined,
},
comments: [
{
author: { username: "barnowl", gravatar: "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png", bio: null },
comment_body: "fsfsfsfsfs",
createdAt: "2020-05-27T14:32:01.682Z",
gifUrl: "",
id: 520,
postId: 28,
updatedAt: "2020-05-27T14:32:01.682Z",
userId: 9,
},
{
author: { username: "barnowl", gravatar: "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png", bio: null },
comment_body: "fsfsfsfsfs",
createdAt: "2020-05-27T14:32:01.682Z",
gifUrl: "",
id: 519,
postId: 27,
updatedAt: "2020-05-27T14:32:01.682Z",
userId: 10,
},
{
author: { username: "barnowl2", gravatar: "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png", bio: null },
comment_body: "fsfsfsfsfs",
createdAt: "2020-05-27T14:32:01.682Z",
gifUrl: "",
id: 518,
postId: 28,
updatedAt: "2020-05-27T14:32:01.682Z",
userId: 11,
},
],
deleteComment: jest.fn(),
};
describe("Should render <CommentList/>", () => {
it("should render <CommentList/>", () => {
const commentList = render(<CommentList {...props} />);
expect(commentList).toBeTruthy();
});
it("should render first comment", () => {
const { getByTestId } = render(<CommentList {...props} />);
const commentList = getByTestId("comment-list-div");
expect(commentList.firstChild).toBeTruthy();
});
it("should render second child", () => {
const { getByTestId } = render(<CommentList {...props} />);
const commentList = getByTestId("comment-list-div");
expect(commentList.lastChild).toBeTruthy();
});
it("should check comments", () => {
const rtl = render(<CommentList {...props} />);
expect(rtl.getByTestId("comment-list-div")).toBeTruthy();
expect(rtl.getByTestId("comment-list-div")).toBeTruthy();
expect(rtl.getByTestId("comment-list-div").querySelectorAll(".comment").length).toEqual(2);
});
// it("should match snapshot", () => {
// const rtl = render(<CommentList {...props} />);
// expect(rtl).toMatchSnapshot();
// });
it("should check more comments", () => {
const { queryByTestId } = render(<CommentList {...props} />);
const commentList = queryByTestId("comment-show-more");
expect(commentList).toBeNull();
});
it("should fire show more action", () => {
const { getByTestId } = render(<CommentList {...props} />);
const showMore = getByTestId("show_more_button");
fireEvent.click(showMore);
expect(getByTestId("comment-show-more").firstChild).toBeTruthy();
});
});
Try to clean up the DOM after each test
import { cleanup } from '#testing-library/react'
// Other import and mock props
describe("Should render <CommentList/>", () => {
afterEach(cleanup)
// your test
}
Note: You have filterComments.map so make sure filterComments have one item.
use
getAllByTestId
example:
await waitFor(() => userEvent.click(screen.getAllByTestId('serviceCard')[0]));
Kinda late but this may be helpful for somebody:
I can see that you are using a iterator that might return multiple children, if you want to solve differently, add a literals key for each child when defining your data-testid tag:
const showMoreComments = () => {
return filterComments.map((comment, i) => (
<div data-testid={`comment-show-more-test-key-${i}`} key={i}>
<CommentListContainer ref={ref} comment={comment} openModal={openModal} handleCloseModal={handleCloseModal} isBold={isBold} handleClickOpen={handleClickOpen} {...props} />
</div>
));
};
It can be solved by use getAllByTestId.
it("should fire show more action", () => {
const { getAllByTestId, getByTestId } = render(<CommentList {...props} />);
const showMore = getAllByTestId("show_more_button")[0];
fireEvent.click(showMore);
expect(getByTestId("comment-show-more").firstChild).toBeTruthy();
});
I am working on implementing smart buttons for a PayPal widget and I was wondering how to go about doing this. My idea right now is to make a button and see if I can fit a script tag inside it that would lead me to make a payment. This is my code so far:
This is from the index.js file
<button>Donate Here Plz</button>
this is the reactjs file that was already written before I hopped on the project.
import ReactDOM from "react-dom";
import scriptLoader from "react-async-script-loader";
class PaypalButton extends React.Component {
constructor(props) {
super(props);
this.state = {
showButton: false,
price: 1.0,
priceError: true
};
window.React = React;
window.ReactDOM = ReactDOM;
}
componentDidMount() {
const { isScriptLoaded, isScriptLoadSucceed } = this.props;
if (isScriptLoaded && isScriptLoadSucceed) {
this.setState({ showButton: true });
}
}
handleInputChange = e => {
const re = /^\d*\.?\d{0,2}$/;
if (e.target.value === "" || re.test(e.target.value)) {
this.setState({ price: e.target.value });
}
if (this.state.price >= 1) {
this.state.priceError = false;
} else {
this.state.priceError = true;
}
console.log(this.state.priceError);
};
componentWillReceiveProps(nextProps) {
const { isScriptLoaded, isScriptLoadSucceed } = nextProps;
const isLoadedButWasntLoadedBefore =
!this.state.showButton && !this.props.isScriptLoaded && isScriptLoaded;
if (isLoadedButWasntLoadedBefore) {
if (isScriptLoadSucceed) {
this.setState({ showButton: true });
}
}
}
render() {
const paypal = window.PAYPAL;
const {
currency,
env,
commit,
client,
onSuccess,
onError,
onCancel
} = this.props;
const { showButton, price } = this.state;
const payment = () =>
paypal.rest.payment.create(env, client, {
transactions: [
{
amount: {
total: price,
currency
}
}
]
});
const onAuthorize = (data, actions) =>
actions.payment.execute().then(() => {
const payment = {
paid: true,
cancelled: false,
payerID: data.payerID,
paymentID: data.paymentID,
paymentToken: data.paymentToken,
returnUrl: data.returnUrl
};
onSuccess(payment);
});
const style = {
layout: "vertical", // horizontal | vertical
size: "medium", // medium | large | responsive
shape: "rect", // pill | rect
color: "gold" // gold | blue | silver | white | black
};
return (
<React.Fragment>
<form>
<h3 style={{ justifySelf: "center" }}>Donate Amount</h3>
<input
name="donate"
type="text"
placeholder="Minimum $1.00"
value={this.state.price}
onChange={this.handleInputChange}
className="donationInput"
/>
</form>
<br />
{showButton && (
<paypal.Button.react
style={style}
env={env}
client={client}
commit={commit}
payment={payment}
onAuthorize={onAuthorize}
onCancel={onCancel}
onError={onError}
/>
)}
</React.Fragment>
);
}
}
export default scriptLoader("https://www.paypalobjects.com/api/checkout.js")(
PaypalButton
);```
No error messages show up, but the button does not lead to anything.
It looks to me like you are trying to use the depreciated version of the checkout api. There is a new version V2 you can view here Paypal Checkout Buttons.
If you want there is an npm package for the new V2 buttons that can be viewed here NPM react-paypal-button-v2.
That said you can do something like the following which is taken from the npm packages github found here react-paypal-button-v2 github but without the typescript and in functional component form:
import React, { useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
const PaypalButton = props => {
const [sdkReady, setSdkReady] = useState(false);
const addPaypalSdk = () => {
const clientID =
'Your-Paypal-Client-ID';
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = `https://www.paypal.com/sdk/js?client-id=${clientID}`;
script.async = true;
script.onload = () => {
setSdkReady(true);
};
script.onerror = () => {
throw new Error('Paypal SDK could not be loaded.');
};
document.body.appendChild(script);
};
useEffect(() => {
if (window !== undefined && window.paypal === undefined) {
addPaypalSdk();
} else if (
window !== undefined &&
window.paypal !== undefined &&
props.onButtonReady
) {
props.onButtonReady();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
//amount goes in the value field we will use props of the button for this
const createOrder = (data, actions) => {
return actions.order.create({
purchase_units: [
{
amount: {
currency_code: 'USD',
value: props.amount,
}
}
]
});
};
const onApprove = (data, actions) => {
return actions.order
.capture()
.then(details => {
if (props.onSuccess) {
return props.onSuccess(data);
}
})
.catch(err => {
console.log(err)
});
};
if (!sdkReady && window.paypal === undefined) {
return (
<div>Loading...</div>
);
}
const Button = window.paypal.Buttons.driver('react', {
React,
ReactDOM
});
//you can set your style to whatever read the documentation for different styles I have put some examples in the style tag
return (
<Button
{...props}
createOrder={
amount && !createOrder
? (data, actions) => createOrder(data, actions)
: (data, actions) => createOrder(data, actions)
}
onApprove={
onSuccess
? (data, actions) => onApprove(data, actions)
: (data, actions) => onApprove(data, actions)
}
style={{
layout: 'vertical',
color: 'blue',
shape: 'rect',
label: 'paypal'
}}
/>
);
};
export default PaypalButton;
Then you can use this in your component like so:
const onSuccess = payment => {
console.log(payment)
}
const onCancel = data => {
console.log(data)
};
const onError = err => {
console.log(err);
};
<PaypalButton
amount="1.00"
onError={onError}
onSuccess={onSuccess}
onCancel={onCancel}
/>
Note this is not tested I just pulled it from the npm packages github and removed the typescript for a little easier reading but it should give you an idea of what to do and how to add your donation logic to the button. I would highly suggest reading through paypals documentation. It is painful to go through but necessary. If you don't feel like messing with creating your own button you can just add the npm package and be on your way pretty easy.