'My images are showing the error message as true for a non boolean, how do I change this? React
Im using react and Im getting the - Received true for a non-boolean attribute img instead of my images showing up. it says "If you want to write it to the DOM, pass a string instead: img="true" or img={value.toString()}".The image gallery is a component in the product page. The images and info are all stored on the shop page below is the coding. thank you
import React, { useState, useEffect } from 'react';
export default function Imagegallery(product) {
const [productData, setProductData] = useState([])
useEffect(()=>{
setProductData(product)
}, [product])
const highlight = document.querySelector(".gallery-highlight");
const previews = document.querySelectorAll(".image-preview img");
previews.forEach(preview => {
preview.addEventListener("click", function() {
const smallSrc = this.src;
const bigSrc = smallSrc.replace("small", "big");
previews.forEach(preview => preview.className.remove("image-active"));
highlight.src = bigSrc;
preview.className.add("image-active");
});
});
return (
<>
<div className="products">
<div className="product">
<div className="image-gallery">
<img className="gallery-highlight" img src={productData.image}
alt={productData.name}/>
<div className="image-preview">
<img src={productData.image2} className="image-active" />
<img src={productData.image3} />
<br />
</div>
</div>
</div>
</div>
</>
);
}
and here is the coding my is first image and data on my shop page
export default function Shop({ setCart, cart, handleClick }) {
const [products] = useState([
{
category: ART,
name: 'Original David Bowie Mug Shot Mixed Media Framed Artwork',
cost: 200,
image:'images/bowiebig.jpeg',
image2: 'images/bowiesmall.jpeg',
image3:'images/bowie2small.jpeg',
page:'Bowie',
description: "Original David Bowie Mug Shot Mixed Media Framed Artwork floral
painting on wooden canvas with an original pop art style David Bowie Mugshot on top
painting is framed with a red baroque style frame including the words deadly
flowers bloom around frame",
},
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
