I have create 2 files one is data.js and slider.js I want to take data from data.js and use in slider.js other items Title & desc are working fine and I am actually new to react so it would be a great if you guys can help me understand and correct my mistakes Thank you!
//This is data.js
export const sliderItems = [
{
id: 1,
img: "",
title: "FANTASTIC PRESALE",
desc: "SAVE BIG ON ABS GAMING SYSTEMS High Refresh Rate Monitors & other hardware components! Upto 60% Off",
},
{
id: 2,
img: "../images/img2.png",
title: "Title 2",
desc: "Desc 2",
},
{
id: 3,
img: "../images/img2.png",
title: "Title 3",
desc: "Desc 3",
},
];
slider.js
const Slider = () => {
const [sideIndex, setSlideIndex] = useState(0);
const handleClick = (direction) => {
};
return (
<Container>
<Arrow direction="left" onClick={()=>handleClick("left")}>
<ArrowLeftOutlined />
</Arrow>
<Wrapper>
{sliderItems.map(item=>(
<Slide >
<ImgContainer>
<Image src={item.img}/>
</ImgContainer>
<InfoContainer>
<Title>{item.title}</Title>
<Desc>{item.desc}</Desc>
<Button>SHOP NOW</Button>
</InfoContainer>
</Slide>
))};
</Wrapper>
<Arrow direction="right" onClick={()=>handleClick("right")}>
<ArrowRightOutlined/>
</Arrow>
</Container>
)
}
>Solution :
use require() on image path, try this.
export const sliderItems = [
{
id: 1,
img: "",
title: "FANTASTIC PRESALE",
desc: "SAVE BIG ON ABS GAMING SYSTEMS High Refresh Rate Monitors & other hardware components! Upto 60% Off",
},
{
id: 2,
img: require("../images/img2.png"),
title: "Title 2",
desc: "Desc 2",
},
{
id: 3,
img: require("../images/img2.png"),
title: "Title 3",
desc: "Desc 3",
},
];
or you can also do like this:
import Image1 from "../images/img2.png";
import Image2 from "../images/img2.png";
export const sliderItems = [
{
id: 1,
img: "",
title: "FANTASTIC PRESALE",
desc: "SAVE BIG ON ABS GAMING SYSTEMS High Refresh Rate Monitors & other hardware components! Upto 60% Off",
},
{
id: 2,
img: Image1,
title: "Title 2",
desc: "Desc 2",
},
{
id: 3,
img: Image2,
title: "Title 3",
desc: "Desc 3",
},
];