CODEWITHSUNDEEP
reactjsarraysreduxreact-hooksrender
Aleksandr
Aleksandr

Reputation: 1

I have an error when using hooks in react-redux

I have an application in which you can add and remove products, as well as these products are displayed on the page. an array of objects is in the state. Using the Usedispatch hooks, I remove and add an array element. Using the UserSelector hook, I get the state and render all the array elements to the page. but I get a error: "React has detected a change in the order of Hooks called by CatalogProducts. This will lead to bugs and errors if not fixed."

I want that when an element is added to the state, it is displayed on the page along with the rest of the elements.

`

import React from 'react';
import {useSelector} from "react-redux";
import ProductCard from "./ProductCard";

const CatalogProducts = () => {

    const newCatalog = useSelector((state) => state)

    return (
        <div>
            {newCatalog.catalog.map((prod, index) => ProductCard(prod, index))}
        </div>
    );
};

export default CatalogProducts;


import React from 'react';
import {useDispatch} from "react-redux";
import {addProductAction} from "../action/productsAction";
import {ConfigProduct} from "../Utils/configProduct";
import '../css/popup.css'
import '../css/flex.css'
import {Button} from "react-bootstrap";

const CreateProduct = () => {

    const dispatch = useDispatch()
    const newProduct = new ConfigProduct()

    function addProd() {
        dispatch(addProductAction(newProduct))
    }

    return (
            <div className = "popup">
                <h2  style={{textAlign: "center", color: "red"}}>New product</h2>
                <input className="item" placeholder="id" onChange={e => newProduct.idProd = e.target.value}/>
                <input className="item" placeholder="info" onChange={e => newProduct.name = e.target.value}/>
                <input className="item" placeholder="price" onChange={e => newProduct.infoProd = e.target.value}/>
                <input className="item" placeholder="date" onChange={e => newProduct.price = e.target.value}/>
                <input className="item" placeholder="enter url" onChange={e => newProduct.date = e.target.value}/>
                <p>
                    <Button onClick={addProd}>Add</Button>
                </p>
            </div>
    );
};

export default CreateProduct;


import React from 'react';
import {Button, Card} from 'react-bootstrap';
import "../css/card.css"
import {useDispatch} from "react-redux";
import {removeProductAction} from "../action/productsAction";

const ProductCard = (product, index) => {

    const Dispatch = useDispatch()

    function deleteProd() {
        Dispatch(removeProductAction(index))
    }

    return (
        <Card style={{ width: '18rem'}} className="m-2" key={index}>
            <Card.Body className="bg-success text-white card" border="primary">
                <img src={product.imgSrc} alt={'product'}/>
                <Card.Subtitle className="mb-2" style={{ fontSize: 16 }}>Name: {product.name}</Card.Subtitle>
                <Card.Subtitle className="mb-2" style={{ fontSize: 14 }}>Info: {product.infoProd}</Card.Subtitle>
                <Card.Subtitle className="mb-2">Price: {product.price} $</Card.Subtitle>
                <Card.Subtitle className="mb-2" style={{ fontSize: 10 }}>{product.date}</Card.Subtitle>
            <Button variant="danger" onClick={deleteProd}>delete</Button>
            </Card.Body>
        </Card>
    );
};

export default ProductCard;


import {ADDPRODUCTS, REMOVEPRODUCTS} from "../action/productsAction";

function productsReducer (state, action)
{
    switch (action.type){
        case ADDPRODUCTS:
            return {...state, state: state.catalog.push(action.payload)}
        case REMOVEPRODUCTS:
            return {...state, state: state.catalog.splice(action.payload, 1)}
        default:
            return state
    }
}
export default productsReducer


export const ADDPRODUCTS = 'addProductsAction'
export const REMOVEPRODUCTS = 'removeProduct'

export const addProductAction = addProducts =>(
    {
        type: ADDPRODUCTS,
        payload: addProducts
    })

export const removeProductAction = removeProducts =>(
    {
        type: REMOVEPRODUCTS,
        payload: removeProducts
    })


import productsReducer from "../reducer/productsReducer";
import { legacy_createStore as createStore} from 'redux'
import {ConfigProduct} from "../Utils/configProduct";

const initialState = {
    catalog: [
        new ConfigProduct(1, "Book", "Big", 20, "20.01.2022", "../Utils/img/1.jpg"),
        new ConfigProduct(2, "Table", "Black", 25, "20.01.2022", "../Utils/img/2.jpg"),
        new ConfigProduct(3, "Window", "White", 30, "20.01.2022", "../Utils/img/3.jpg"),
        new ConfigProduct(4, "Apple", "Green", 35, "20.01.2022", "../Utils/img/4.jpg")]
}

const store = createStore(productsReducer, initialState)

export default store

`

Upvotes: 0

Views: 148

Answers (1)

Konrad
Konrad

Reputation: 24661

This is not how you use components

ProductCard(prod, index)

It should be

<ProductCard product={prod} index={index} />

And the declaration should look like that:

const ProductCard = ({ product, index }) => {

Upvotes: 1

Related Questions