Develop Reference

Import images from object array in map with Webpack

I have an array of objects that looks like this:
export const NGOarray = [
{
name: "1% for the Planet ",
description:
"A leading global nonprofit, building a movement of businesses and individuals delivering philanthropic support to environmental organizations working on the front lines for our planet.",
link: "https://onepercentfortheplanet.org/",
category: ["water", "everything"],
logo: "1fortheplanet.webp",
},
{
name: "4ocean",
description:
"As both a public benefit corporation and Certified B Corp, we’re committed to ending the ocean plastic crisis.",
link: "https://www.4ocean.com",
category: ["water", "everything"],
logo: "4 Ocean.svg",
} ]
The logo property maps to the filename they have in a folder.
I'm trying to map through that array and show each image like this:
{NGOarray.map((org) => {
<div key={org.name}>
{org.logo && (
<img
src={
require(`../assets/organizations/${org.logo}`)
.default
}
/>
)}
<h3 className="text-2xl font-sans mb-4">{org.name}</h3>
<p>{org.description}</p>
</div>
);
}
But the image won't show up.
Any idea how I can get it to work?

Okay, this seems to have worked, leaving answer here for reference:
function importAll(r) {
return r.keys().map(r);
}
const logos = importAll(
require.context("../assets/organizations/", false, /\.(png|jpe?g|svg)$/)
);
And when mapping the array:
{NGOarray.map((org, index) => {
<div key={org.name}>
{org.logo && <img src={logos[index]} alt={org.name} />}
<h3 className="text-2xl font-sans mb-4">{org.name}</h3>
<p>{org.description}</p>
</div>
);
}

React: mapping through a list of svg images

I am trying to map through a list of svg images and show enough description corresponding to the svg image.
index.js
import {ReactComponent as Pic1} from "../../../../assets/buyer-1.svg";
import {ReactComponent as Pic2} from "../../../../assets/buyer-2.svg";
import {ReactComponent as Pic3} from "../../../../assets/buyer-3.svg";
const data = [
{
id: `1`,
title: "Coming soon",
description:'',
img: Pic1,
},
{
id: `2`,
title: "Coming soon",
description:'',
img: Pic2,
},
{
id: `3`,
tile: "Coming soon",
description:'',
img: Pic3,
},
]
function Test() {
return (
{data.map(({ id, title,description, img }) => (
<div key={id} className="guest--item swiper-slide">
<div>
<img key={id} src={img} alt='mySvgImage' />
<h1>{title}</h1>
<h2>{description}</h2>
</div>
</div>
))}
)}
currently when i check my react website i can only see mySvgImage which is the alt 3 times and cant see the actual image

You are importing SVG's as React Component hence you should use them as Component itself.
In you code you are passing a React Component (SVG's which you imported as React Component) as a src attribute to an <img> tag which is invalid.
import React from "react";
import ReactDOM from "react-dom";
import {ReactComponent as Pic1} from "../../../../assets/buyer-1.svg";
import {ReactComponent as Pic2} from "../../../../assets/buyer-2.svg";
import {ReactComponent as Pic3} from "../../../../assets/buyer-3.svg";
const data = [
{
id: `1`,
title: "Coming soon",
description: "",
Image: Pic1
},
{
id: `2`,
title: "Coming soon",
description: "",
Image: Pic2
},
{
id: `3`,
tile: "Coming soon",
description: "",
Image: Pic3
}
];
function Test() {
return (
<>
{data.map(({ id, title, description, Image }) => (
<div key={id}>
<div>
<Image /> {/* Use Image as Component */}
<h1>{title}</h1>
<h2>{description}</h2>
</div>
</div>
))}
</>
);
}

Because you are importing your images the wrong way. I have made this working CodeSandbox which is exactly the same as your example. Check how I imported images and it's working just fine. CodeSandbox

Where you got it wrong is importing SVG as React Component and using for a src attribute in an img tag.
So u don't need to import as ReactComponent.
You can import this way.
import Pic1 from "../../../../assets/buyer-1.svg";
import Pic1 from "../../../../assets/buyer-1.svg";
import Pic2 from "../../../../assets/buyer-2.svg";
import Pic3 from "../../../../assets/buyer-3.svg";
const data = [
{
id: `1`,
title: "Coming soon",
description:'',
img: Pic1,
},
{
id: `2`,
title: "Coming soon",
description:'',
img: Pic2,
},
{
id: `3`,
tile: "Coming soon",
description:'',
img: Pic3,
},
]
function Test() {
return (
{data.map(({ id, title,description, img }) => (
<div key={id} className="guest--item swiper-slide">
<div>
<img key={id} src={img} alt='mySvgImage' />
<h1>{title}</h1>
<h2>{description}</h2>
</div>
</div>
))}
)}

Images Won't Load with Array in React

I've been trying to learn React over the past few weeks, and have decided to go through the LamaDev tutorial series. Yesterday I started with the portfolio tutorial (https://www.youtube.com/watch?v=hQjlM-8C4Ps&t=2798s) but have been stuck with trying to load images in my array.
I went ahead and built a component called 'Product' which the code can be found below. After that I followed the instructions and built the ProductList component which is suppose to show each of my products that are in my data.js file. I have gone and posted those below.
The problem I am running in to is that if I use a random img link from the internet the image gets imported into my product and show through my product list. However this is not what I am wanting to do since there are some images of my own I wanted to use.
When my Product.jsx tried to use a image I have saved in src/assets/img/ the img won't load. I tried using the require tag but it still is not working. I have also gone ahead and uploaded everything to my github page which can be found here and used as a reference.
I'm really not sure what I've done wrong here since everything looks right, but still know the issue is falling between the keyboard and the chair.
Thanks for any help
Product.jsx
import "./product.css";
const Product = ({ img, link }) => {
return (
<div className="p">
<div className="p-browser">
<div className="p-circle"></div>
<div className="p-circle"></div>
<div className="p-circle"></div>
</div>
<a href={link} target="_blank" rel="noreferrer">
<img src={img} alt="" className="p-img" />
</a>
</div>
);
};
export default Product;
ProductList.jsx
import Product from "../product/Product";
import "./productList.css";
import { products } from "../../data";
const ProductList = () => {
return (
<div className="pl">
<div className="pl-texts">
<h1 className="pl-title">Create & inspire. It's Jon</h1>
<p className="pl-desc">
Jon Snow is a creative portfolio that your work has been waiting for.
Beautiful homes, stunning portfolio styles & a whole lot more awaits
inside.
</p>
</div>
<div className="pl-list">
{products.map((item) => (
// console.log(item)
<Product key={item.id} img={item.img} link={item.link} />
))}
</div>
</div>
);
};
export default ProductList;
data.js
export const products = [
{
id: 1,
img: require("./assets/img/theBestTestSite.jpg"),
link: "http://google.com",
},
{
id: 2,
img: require("./assets/img/theBestTestSite.jpg"),
link: "http://google.com",
},
{
id: 3,
img: require("./assets/img/theBestTestSite.jpg"),
link: "http://google.com",
},
];

In data.js try to import images first instead of require
import img1 from "./assets/img/theBestTestSite.jpg"
export const products = [
{
id: 1,
img: img1,
link: "http://google.com",
},
// and same for others
];

How to display array of text in react?

I'm making a portfolio website in ReactJS. I'm trying to display an array of text under desc in HomePageContent.js. I'm not sure how display each of the paragraphs. I think I have to map the paragraphs, but I'm not sure how to do that.
Relevent Code
HomePageContent.js
// Image import statements
import Im1 from '../img/Im1.png';
import Im2 from '../img/Im2.jpg';
import Im3 from '../img/Im3.jpg';
let HomePageContent = {
job: [{
logo: Im1,
alt: 'Logo1',
companyName: 'comp1' ,
link: 'link1',
title: 't1',
duration: 'dur1',
location: 'loc1',
desc: {
text: 'p1',
text: 'p2',
text: 'p3',
text: 'p4'
},
id: 1
}
export default HomePageContent;
Job.js
import React from 'react';
import '../css/Experience.css';
function Job(props) {
console.log(props.name);
const jobList = props.job.map(j =>
<div className='exp-container'>
<img src={j.logo} alt={j.alt} />
<div className='description'>
<div>
<a href={j.link} rel='noopener noreferrer' target='_blank'>
{j.companyName}
</a>
</div>
<div>{j.title}</div>
<div>{j.duration}</div>
<div>{j.location}</div>
<div><p>{j.desc}</p></div>
</div>
</div>
)
return (
<div>{jobList}</div>
);
}
export default Job;

You're right, mapping over the paragraphs would work, but I recommend changing the value inside desc to an array so that you have an easier time doing that.
...
desc: [
'p1',
'p2',
'p3',
'p4',
],
...
Then, in your JSX, you can map over it and put each of them in their own set of <p> tags.
<div>
{j.desc.map(paragraph => <p>{paragraph}</p>)}
</div>
This works because the map function returns an array of whatever you return in the provided fat arrow function, and JSX will automatically render an array of JSX elements one right after the other. So it looks like this in the rendered HTML:
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
</div>

React - how to create a dynamic (using router) details pages

This is my data (in a seperate JS file):
const someData= [
{
id: 1,
title: "Article 1",
desc: "Some description lorem ipsum",
},
{
id: 2,
title: "Article 2",
desc: "Some description lorem ipsum",
},
{
id: 3,
title: "Article 3",
desc: "Some description lorem ipsum",
}
]
export default someData;
Now I'm mapping the data like this:
- Articles.js file
const articleItems = this.state.someData.map(item =>
<ArticleItem key={item.id} item={item}
/>)
return(
<div>{articleItems}</div>
)
And listing all articles with only the article title displayed in ArticleItem component.
- articleItem.js file
return(
<h1>{props.item.title}</h1>
)
How can I create so you can click on an article title in the list, which would then go to that specific article (url should be /article/id) and display all data for that specific article?

Use React Routers Version 4 to achiever this.
Article.js file-
const articleItems = this.state.someData.map(item =>
<Route key={item.id} path=`/${item.title}/${item.id}` render={
<ArticleItem
{...props}
item={item}
/>
} />
/>)
return(
<div>{articleItems}</div>
)
In the file where you are rendering the Links render like this.
render() {
return(
<Link to=`/${item.title}/${item.id}`>{item.title}</Link>
);
}
Don't forget to import Route and Link.
Hope this helps.