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

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 { 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 depricated 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

CodePudding user response：

import React, {useState} from 'react';

There's an syntax error in React import

CodePudding user response：

It would be better to post the error you get from browser console. But my guess would be that you have a syntax error somewhere. For example:

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

this doesn't look normal.