Kindly wait a moment, post will be visible in just 5 seconds.
Sher Muhammad
Posted on 18 November 2021
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 (
# | Name | Price | Quantity | Categoy |
---|---|---|---|---|
1 | {product.name} | {product.price} | {product.quantity} | -- |
{productDetails.name}
price{productDetails.price}
Quantity{productDetails.quantity}
Category--
Description{productDetails.description}
{ productDetails.productPictures.map(picture =>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);
Learn trending tech & full-stack development. Book now
0 Comments