React newbie here, i have used firebase authentication to handle my user sessions. So i want when a person is loged in and wants to make payments, there email credentials to be displayed at the top of the payment page as part of there personal information but am not able to display the email details.
Instead i get an error saying (You may need an appropriate loader to handle this file type) Image of the error i get
import React from 'react';
import './Product.css';
import { useStateValue } from './StateProvider';
function payment() {
const [{ basket, user }, dispatch] = useStateValue();
return (
<div className='payment'>
<div className="payment__container">
<div className="payment__section">
<div className="payment__title">
<h3>Delivery Address</h3>
</div>
<div className="payment__address">
<p>{user?.email}</p>
</div>
</div>
<div className="payment__section">
</div>
<div className="payment__section">
</div>
</div>
</div>
)
}
export default payment
I dont know how to go about the error.
The whole project code is here https://github.com/Elijah-A-W/Amazon-Clone-With-React/blob/master/src/Payment.js
You only need to make sure you have installed react-scripts 3.3.0+ version. In your case if you try with below code ,it will work. so the problem is optional-chaining is not working because of your react-script version.
<div className="payment__address">
<p>{user && user.email ?user.email:''}</p>
</div>