Kindly wait a moment, post will be visible in just 5 seconds.

No Preview

Sher Muhammad

Posted on 18 November 2021

product picture display code now working TypeError: Cannot read properties of undefined (reading 'map')

Ad Banner

my product picture display not working in modal can you help me solve the problem

import React, { useState } from "react";import Layout from "../../components/Layout"; import { Container, Row, Col, Table } from "react-bootstrap"; import Input from "../../components/UI/Input"; import { useSelector, useDispatch } from "react-redux"; import { addProduct } from "../../actions"; import Modal from "../../components/UI/Modal"; import "./style.css"; import { generatePublicUrl } from "../../urlConfig"; /** * @author * @function Products **/ const Products = (props) => { const [name, setName] = useState(""); const [quantity, setQuantity] = useState(""); const [price, setPrice] = useState(""); const [description, setDescription] = useState(""); const [categoryId, setCategoryId] = useState(""); const [productPictures, setProductPictures] = useState([]); const [show, setShow] = useState(false); const [productDetailModal, setProductDetailModal] = useState(false); const [productDetails, setProductDetails] = useState([null]); const category = useSelector((state) => state.category); const product = useSelector((state) => state.product); const dispatch = useDispatch(); const handleClose = () => { const form = new FormData(); form.append("name", name); form.append("quantity", quantity); form.append("price", price); form.append("description", description); form.append("category", categoryId); for (let pic of productPictures) { form.append("productPicture", pic); } dispatch(addProduct(form)); setShow(false); }; const handleShow = () => setShow(true); const createCategoryList = (categories, options = []) => { for (let category of categories) { options.push({ value: category._id, name: category.name }); if (category.children.length > 0) { createCategoryList(category.children, options); } } return options; }; const handleProductPictures = (e) => { setProductPictures([ ...productPictures, e.target.files[0]]); }; console.log(productPictures); const renderProducts = () => { return (

{product.products.map((product) => ( showProductDetailsModal(product)} key={product._id} > ))}
#NamePriceQuantityCategoy
1{product.name}{product.price}{product.quantity}--
); }; const renderAddProductModal = () => { return ( setName(e.target.value)} /> setQuantity(e.target.value)} /> setPrice(e.target.value)} /> setDescription(e.target.value)} /> setCategoryId(e.target.value)} > {createCategoryList(category.categories).map((option) => ( ))} {productPictures.length > 0 ? productPictures.map((pic, index) => (
{JSON.stringify(pic.name)}
)) : null} ); }; const handlecloseProductDetailModal = () => { setProductDetailModal(false); }; const showProductDetailsModal = (product) => { setProductDetails(product); setProductDetailModal(true); }; const renderProductDetailModal = () => { if (!productDetails) { return null; } return ( Name

{productDetails.name}

price

{productDetails.price}

Quantity

{productDetails.quantity}

Category

--

Description

{productDetails.description}

{ productDetails.productPictures.map(picture =>
) } ); }; return (

Products

add
{renderProducts()} {renderAddProductModal()} {renderProductDetailModal()} ); }; export default Products; its a back end now

const Product = require('../models/product')const shortid = require('shortid'); const slugify = require('slugify'); const Category = require("../models/category"); exports.createProduct = (req, res) => { //res.status(200).json( { file: req.files, body: req.body } ); const { name, price, description, category, quantity, createdBy } = req.body; let productPictures = []; if (req.files.length > 0) { productPictures = req.files.map((file) => { return { img: file.filename }; }); } const product = new Product({ name: name, slug: slugify(name), price, quantity, description, productPictures, category, createdBy: req.user._id, }); product.save(((error, product) => { if (error) return res.status(400).json({ error }); if (product) { res.status(201).json({ product, files: req.files }); } })); };

const mongoose = require('mongoose');const productSchema = new mongoose.Schema({ name: { type: String, required: true, trim: true }, slug: { type: String, required: true, unique: true }, price: { type: Number, required: true }, quantity: { type: Number, required: true }, description: { type: String, required: true, trim: true }, offer: { type: Number }, productPictures: [ { img: { type: String } } ], reviews: [ { userId: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, review: String } ], category: { type: mongoose.Schema.Types.ObjectId, ref: 'Category', required: true }, createdBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true }, updatedAt: Date, }, { timestamps: true }); module.exports = mongoose.model('Product', productSchema);

0

19

0

No Preview

Sher Muhammad

Explore more similar Post

0 Comments

Loading..