Not able fetch the right output because of the parsing error - node.js

Question

import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import ProductList from "./Components/ProductList";
import React, { useState } from "react";
function App() {
const productList = [
{
price: 9999,
name: "IPhone 10S Max",
quantity: 0,
},
{
price: 999,
name: "Redmi Note 10S Max",
quantity: 0,
},
];
let [productList , setProductList] = useState(productList);
const incrementQuantity = (index) => {
let newProductList = [...productList];
newProductList[index].quantity++;
setProductList(newProductList);
};
const decrementQuantity = (index) => {
let newProductList = [...productList];
newProductList[index].quantity > 0
? newProductList[index].quantity--
: (newProductList[index].quantity = 0);
setProductList(newProductList);
};
return (
<>
<Navbar />
<main className="container mt-5">
<ProductList
productList={productList}
incrementQuantity={incrementQuantity}
decrementQuantity={decrementQuantity}
/>
</main>
{/*<Footer/>*/}
</>
);
}
export default App;
**Line 21:7: Parsing error: Identifier 'productList' has already been declared. (21:7)**
Not able fetch the right output because of the parsing error.

Answer 1

Your state name of the value is the same like the object name:
//try to name it smth like initialProductList and pass it to useState(initalProductList)
const productList = [
{
price: 9999,
name: "IPhone 10S Max",
quantity: 0,
},
{
price: 999,
name: "Redmi Note 10S Max",
quantity: 0,
},
];
let [productList , setProductList] = useState(productList);
Also,
useState() shuld be defind with const like so:
const [productList , setProductList] = useState(productList);