CODEWITHSUNDEEP
reactjspaypal
Little Brain
Little Brain

Reputation: 2847

PayPal Donate button causes error "Unterminated JSX contents"

I'm trying to add a PayPal 'Donate' button to a React app built using Meteor.

I've pasted the code generated by the PayPal website into a file DonateButton.jsx in my 'includes' directory:

import React from 'react';

function DonateButton() {
    return (
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN REDACTED-----END PKCS7-----
">
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
    );
}

export default DonateButton;

When the project tries to compile I see this error:

Unterminated JSX contents

I notice that the img and input elements in the PayPal code are unterminated: <img (stuff) >

If I add a forward stroke to each element to close it like this <img (stuff) /> the error goes away and the button can be added to a page just like any other other React component:

import DonateButton from '../../components/DonateButton/DonateButton.jsx';

const Home = ({ history }) => (
    <div className="Home">
        <DonateButton />
    </div>
);

Everything looks fine, and clicking the button takes me to a PayPal donation form.

My question is, does anybody know if this is OK or if there is some reason that the PayPal button needs to have unterminated elements? I've googled but not found anything.

Upvotes: 0

Views: 417

Answers (2)

Amir5000
Amir5000

Reputation: 1728

All input fields need to be self closing tags. <input /> and the img tag <img />

Like this:

<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="encrypted" value="-----BEGIN REDACTED-----END PKCS7----- " />
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!" />
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1" />

There are no Gotcha's since this is JSX not actual HTML that will then get transpiled into JS that will render a correct HTML element to the DOM.

Upvotes: 2

Joshua Underwood
Joshua Underwood

Reputation: 927

You need to terminate your <input> tags. <input type="hidden" name="cmd" value="_s-xclick" /> for example.

You also need to do the same for your <img> tags

Upvotes: 1

Related Questions