0

I'm implementing Stripe in my project and in the official docs, one of the snippets of code advised to include in the component is:

const options = {
    clientSecret,
    appearance
};

I'm not too familiar with such declarations. It almost looks like a dictionary but it doesn't consist of a key value pair. I've heard of a concept of tuple but looking at how those are declared, this doesn't seem to match.

Nevertheless, I used that code in my implementation and it worked... until I decoupled this code into a child component. Now I need to pass the clientSecret value as a prop.

Hence, I run:

export default function myComponent(props) {
    const apearance = ...

    const options = {
        props.clientSecret,
        appearance
    };

    return(
        <Elements options={options} ...>
        </Elements>
    )
}

However, now I get an error at time of compilation on props.clientSecret (specifically the dot) where the error message says:

Unexpected token, expected ","

Why am I unable to create the options variable from props value, whereas it's possible if not invoking props? Is there a way around it?

Sam
  • 1,130
  • 12
  • 36
  • 3
    That's object shorthand. I'd recommend reading up on basic ES6 syntax, it's very common in React and other modern JS. – jonrsharpe Mar 17 '22 at 18:47
  • Thank you. That basically answers my question. I defined a new `const clientSecret` above the declaration of `options` and then simply changed `props.clientSecret` to `clientSecret` and the error is gone. – Sam Mar 17 '22 at 18:50
  • 1
    In your case, you could also destructure the props: `myComponent({ clientSecret })` or use the long form instead of the shorthand: `const options = { clientSecret: props.clientSecret, apearance };` – Emile Bergeron Mar 17 '22 at 18:52

0 Answers0