Cannot get React.js page to load and cannot figure out why

Question

I know the handleChange and handleSubmit are not done but that is not the problem as even with removing those elements I can not get it to load. I am working through an older tutorial and some things are deprecated but I can not figure the problem with this part. Even using code from Github:

https://github.com/CleverProgrammers/react-challenge-amazon-clone/blob/master/src/Payment.js

...that the creators used will not load any better. All other parts load just fine.

Thanks for any insight as this is a learning experience for me.

import { useElements, useStripe,CardElement } from '@stripe/react-stripe-js';
import { React, useState } from 'react'
import CurrencyFormat from 'react-currency-format';
import { Link } from 'react-router-dom';
import CheckoutProduct from './CheckoutProduct';
import './Payment.css'
import { useStateValue } from './StateProvider'
import { getBasketTotal } from './reducer';


function Payment() {
  
  const [{basket,user},dispatch] =useStateValue();
  const [processing , setProcessing] = useState("");
  const [succeeded, setSucceeded] = useState(false);
  const [error,setError] = useState(null);
  const [disabled , setDisabled] = useState(true);
//stripe 
const stripe = useStripe();
const elements = useElements();
const handleSubmit = e =>{
  //stripe stuff
}
const handleChange = e =>{
  //current 600
    //lsiten for changes and display errors
    setDisabled({error}=null);
    setError("Error unknown");// event is deprecated need to find valid replacement
}
  return (
    <div className='payment'>
    
        <div className='payment__container'>

          <h1>
            Checkout (
              <Link to = '/checkout'>{basket?.length} items</Link>
              )
          </h1>

            <div className='payment__section'>
                <div className='payment__title'>
                    <h3>Delivery Adress</h3>
                </div>
                <div className='payment__address'>
                  <p>{user?.email}</p>
                  <p>123 Smith Lane</p>
                  <p>Camden, New Jersey</p>

                </div>
            </div>

            <div className='payment__section'>
              <div className='payment__title'>
                  <h3>Review Items and delivery</h3>
              </div>
              <div className='payment__items'>
                  {basket.map(item =>(
                    <CheckoutProduct
                        id ={item.id}
                        title = {item.title}
                        image = {item.image}
                        price = {item.price}
                        rating = {item.rating}
                    />))}
              </div>
                
            </div>

            <div className='payment__section'>
                <div className='payment__title'>
                    <h3>Payment Title</h3>
                </div>
                <div className='payment__details'>
                  {/*Stripe 535*/}
                    <form onSubmit={handleSubmit}>
                      <CardElement onChange={handleChange} />
                      <div className='payment__priceContainer'>
                        <CurrencyFormat
                        renderText={(value)=>(
                          <>
                          <h3>Order Total: {value}</h3>
                          </>
                        )}

                          decimalScale={2}
                          value = {getBasketTotal(basket)}
                          displayType = {"text"}
                          thousandSeparator = {true}
                          prefix={'$'}

                        />
                        <button disabled = {processing || disabled || succeeded } > 
                          <span>{processing ? <p>Processing</p>: "Buy Now"}</span>
                         </button>
                      </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
  )
}

export default Payment 

Answer 1

import React, {useState} from 'react';

There's an syntax error in React import