I am new to react and I'm not sure how to implement the stripe Elements in my app.js

Question

My App.js looks like this

import { BrowserRouter, Routes, Route } from 'react-router-dom' 
import { Elements } from '@stripe/react-stripe-js'
import { loadStripe } from '@stripe/stripe-js'

function App() {

  const [stripeApiKey, setStripeApiKey] = useState('');

  useEffect(() => {
    store.dispatch(loadUser())

    async function getStripApiKey() {
      const { data } = await axios.get('/api/v1/stripeapi');

      setStripeApiKey(data.stripeApiKey)
    }

    getStripApiKey();

  }, [])

  return (
            <BrowserRouter>
              <Routes>
                {stripeApiKey && 
                   <Elements stripe={loadStripe(stripeApiKey)}>
                      <Route path = "/payment" element={<Payment/>} exact/>
                   </Elements>
              </Routes>
           
          }

The browser returns an error saying that the elements is not a route component but I don't know how else to render it. I read the stripe/react documentation sample but i still cant get it to work.

I keep getting this error in my console

"index.tsx:19 Uncaught (in promise) Error: [Elements] is not a component. All component children of < Routes > must be a < Route > or <React.Fragment>"

Answer 1

The error is quite clear: within a , all direct children must be routes.

Move the wrap inside element={...}.

try this code it should work.

happy coding !

        <Route path = "/payment" element={ stripeApiKey && 
          <Elements stripe={loadStripe(stripeApiKey)}> <Payment/> </Elements>} exact/>