please can someone help me to build my self e-commerce project by using react and redux lessons within it so iwant to expose a bunch of categories products in my project for example the first component is for the motors product , the second for the heater devices and so on …,then I just begin to make the first component and I reach this type of error showing, the error is in the Motors file : "
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem."
so this is all my files project :
the index.js file :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { App } from './App.js';
import { Provider } from 'react-redux';
import { store } from './components/App/store';
ReactDOM.render(
<Provider store={store} >
<App />
</Provider >,
document.getElementById('root')
);
this is the App.js file :
import {React} from 'react';
import {Navbar} from './components/Navbar/Navbar.js';
import {Motors} from './features/mecanicsProducts/mecanicsProducts.js';
export const App = () => {
return (
<div className='app' >
<Navbar />
<Motors />
</div>
)
}
````
this is the mecanicSliceProduct.js :
````
const motors = [{name: "aprilia caponord", description:"Le gros bicylindre envoyant 130 bourrins sur le gros SMV, le Caponord sort grosso modo la même patate", price: 37000, reservoir: "24 L", moteur: "bicylindre 4temps", vitesse: "200km/h", nombre: 7, quantité: 0, id: 0 },
{name: "aprilia rsv4", description: "LA RSV4 RR d’Aprilia est déclinée sur la base de la machine championne en WSBK en 2014", price: 29000, reservoir: "18.5 L", moteur: "4 cylindres, 4 temps", vitesse: "290 km/h", nombre: 6, quantité: 0, id: 1},
{name: "aprilia sr150", description: "PARTIE CYCLE Aprilia SR 150 4T · Accessoires partie cycle · Guidon, poignées, levier ", price: 5000 ,reservoir: "6.5 L", moteur: "monocylindres", vitesse: "110 km/h", nombre: 16, quantité: 0, id: 2},
{name: "Ducati Desmosidici", description: "La Desmosedici de Grand Prix a actuellement du mal à faire mordre la poussière à ses concurrentes", price: 35000, reservoir: "22 L", moteur: "Quatre-cylindres en V à 90°", vitesse: "290 km/h", nombre: 4, quantité:0, id:3},
{name: "Honda cbr 1000", description: "Seul le temps juge les légendes.", price: 35000, reservoir: "16.1 L", moteur: "4 cylindres, 4temps", vitesse: "290 km/h", nombre: 4, quantité: 0, id: 4},
{name: "Forza FTM", description: "Cyclomoteur FORZA-FTM ,Cylindrage 110CC , Charge utile : 110 Kg , Vitesse Max : 160 Km/h ", price: 2400, reservoir: "4.5 L", vitesse: "160km/h", nombre: 20, quantité: 0, id: 5}];
export const motorsReducer = (state = motors, action) => {
switch(action.type) {
case 'motors/buy':
const articleToBuy = state.find(product => product.name === action.payload.name);
if (articleToBuy) {
articleToBuy.quantité += 1;
articleToBuy.number -= articleToBuy.quantité;
} if (articleToBuy.quantité > articleToBuy.number) {
state.filter(product=> product.number === 0)
}
return [...state, articleToBuy];
case 'motors/changeQuantity':
const {name, newQuantity} = action.payload;
let productToUpload = state.find(product => product.name === name);
const uploadedProduct = {...productToUpload, newQuantity};
return [...state, uploadedProduct];
default:
return state;
}
};
const buyProduct = (product) => {
return {
type: 'motors/buy',
payload: product
}
};
const changeQuantity = (product) => {
return {type: 'motors/changeQuantity',
payload: product };
};
export const selectmotorsProduct = (state) => {
return state.motors.map(motor => ({
name: motor.name,
img: motor.img,
price: motor.price
}))
};
export const selectPurchasedMotors = (state) => {
return state.motors.filter(motor => motor.quantité !== 0).map(motor=> motor.id)
}
````
this is the Motors file:
````
``import {selectmotorsProduct} from './mecanicSliceProducts';
import React from 'react';
import {Product} from '../Product.js';
import {useSelector} from "react-redux";
export const Motors = () => {
const motorsProduct = useSelector(selectmotorsProduct);
return (
<div className="motors" >
{motorsProduct.map(motor => <Product product={motor} />
)}
</div>
)
}
the file Product.js :
import React from "react";
export const Product = ({product}) => {
return (<div className="product" >
<h2>{product.name}</h2>
<img src={product.img} alt='' />
<p>{product.price}</p>
</div>
)
}
````