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>
Related
I am creating a website. I am a beginner. I have an issue. I have an array of react components. I don’t know can I use React components as the array elements. They are images, imported from the folder of my project. Also, I have an array of names of news companies. The idea is to create blocks with the name and image above. I want to create blocks according to the my images array length. So if the length of this array is 4, the cards I have 4. The issue is I can't display images, I imported them to my project. Main code is in the main page component. Also, I have a component called Author Card. In it, I have a React component, that receives name and image as the props and put them in the card Html block.
Here is my main page component code:
import React from 'react';
import AuthorCard from "./MainPageComponents/AuthorCard";
import BBC_Logo from '../assets/images/BBC_Logo.png';
import FOX_Logo from '../assets/images/FOX_Logo.png';
import CNN_Logo from '../assets/images/CNN_logo.png';
import ForbesLogo from '../assets/images/forbes-logo.png';
function MainPage(props) {
const channels = [
{
name: 'BBC',
index: 1
},
{
name: 'FOX',
index: 2
},
{
name: 'CNN',
index: 3
},
{
name: 'FORBES',
index: 4
},
];
const logos = [
<BBC_Logo key={1} />,
<FOX_Logo key={2}/>,
<CNN_Logo key={3}/>,
<ForbesLogo key={4}/>
];
return (
<div className="main-page">
<div className="main-page_container">
<section className="main-page_channels">
{channels.map( (channel) => {
logos.map( (logo) => {
return <AuthorCard name={channel.name} img={logo} />
})
})}
</section>
</div>
</div>
);
}
export default MainPage;
Here is my Author Card component code:
import React from 'react';
function AuthorCard(props) {
return (
<div className="author-card">
<div className="author-img">
{props.img}
</div>
<div className="author-name">
{props.name}
</div>
</div>
);
}
export default AuthorCard;
Please, help!
I would handle this a bit differently. First thing the way you import your logos is not imported as a component. Rather you get the path/src of the image which you can then use in a component. Read more about that here: https://create-react-app.dev/docs/adding-images-fonts-and-files/
So the way I would do this is to put the logo img src into your channels array and then pass that img src to the AuthorCard component. Then in the AuthorCard component your use a component to render the image. Like this:
import React from "react";
import BBC_Logo from "../assets/images/BBC_Logo.png";
import FOX_Logo from "../assets/images/FOX_Logo.png";
import CNN_Logo from "../assets/images/CNN_logo.png";
import ForbesLogo from "../assets/images/forbes-logo.png";
export default function App() {
return (
<div className="App">
<MainPage />
</div>
);
}
const channels = [
{
name: "BBC",
index: 1,
img: BBC_Logo
},
{
name: "FOX",
index: 2,
img: FOX_Logo
},
{
name: "CNN",
index: 3,
img: CNN_Logo
},
{
name: "FORBES",
index: 4,
img: ForbesLogo
}
];
function MainPage(props) {
return (
<div className="main-page">
<div className="main-page_container">
<section className="main-page_channels">
{channels.map((channel) => {
return <AuthorCard name={channel.name} img={channel.img} />;
})}
</section>
</div>
</div>
);
}
function AuthorCard(props) {
return (
<div className="author-card">
<div className="author-img">
<img src={props.img} alt="author card" />
</div>
<div className="author-name">{props.name}</div>
</div>
);
}
Here, we are using the map function to iterate over the channels array and render an AuthorCard component for each channel. We pass the name property to the AuthorCard component, as well as the corresponding logo from the logos array.
Note that we are also passing a key prop to the AuthorCard component to help React identify each component uniquely. In this case, we're using the index property of each channel object.
I am unable to figure out how to add local images to buefy carousel. Is there something I am doing wrong? I have tried to modify template section to include b-image but no use. Thanks
Code:
<template>
<b-carousel>
<b-carousel-item v-for="(carousel, i) in carousels" :key="i">
<section :class="`hero is-medium`">
<div class="hero-body has-text-centered">
<b-image>{{carousel.image}}</b-image>
</div>
</section>
</b-carousel-item>
</b-carousel>
</template>
<script>
export default {
data(){
return {
carousels: [
{
title: 'Slide 1',
image: require("#/assets/img1.png")
}, {
title: 'Slide 2',
image: require("#/assets/img2.png")
},
{
title: 'Slide 3',
image: require("#/assets/img3.png")
},
]
}
}
}
</script>
b-image tag takes src as prop which you can use to render your image. Try modifying the b-image part to the below code
<b-image :src="carousel.image" />
Sorry this question might be duplicated, but none of the existing answers helped me
I'm a beginner in React and js
I want to add multiple objects inside the component
Like:
src={url}
name={text}
subTitle={subtext}
my index.js
const tableColumns = [
{
title: 'Title/Artist',
dataIndex: 'name',
key: 'name',
render: (text) => (
<div className="d-flex align-items-center">
<AvatarStatus
shape="square"
src="https://i.scdn.co/image/ab67616d00001e02bd26ede1ae69327010d49946"
name={text}
subTitle="Dua Lipa"
/>
</div>
),
},
];
return (
<>
<Table
className="no-border-last"
columns={tableColumns}
dataSource={recentReleasesData}
rowKey='id'
pagination={false}
/>
</>
my data.js
export const RecentReleasesData = [
{
id: '#5332',
artwork: 'https://i.scdn.co/image/ab67616d00001e02bd26ede1ae69327010d49946',
name: 'Future Nostalgia',
artist: 'Dua Lipa',
label: 'Warner Records',
barcode: '19029500',
releasedate: '2021-02-11',
tracks: '11',
promolink: 'Smart Link',
status: 'Approved',
},
{
id: '#6438',
artwork: 'https://i.scdn.co/image/ab67616d00001e02caf82abb2338880577e472be',
name: 'Love',
artist: 'Someonw',
label: 'UMG Records',
barcode: '50029500',
releasedate: '2017-08-21',
tracks: '2',
promolink: 'Smart Link',
status: 'Rejected',
},
];
My comp AvatarStatus.js
import React from 'react';
import PropTypes from 'prop-types'
import { Avatar } from 'antd';
const renderAvatar = props => {
return <Avatar {...props} className={`ant-avatar-${props.type}`}>{props.text}
</Avatar>;
}
export const AvatarStatus = props => {
const { name, suffix, subTitle, id, type, src, icon, size, shape, gap, text,
onNameClick } = props
return (
<div className="avatar-status d-flex align-items-center">
{renderAvatar({icon, src, type, size, shape, gap, text })}
<div className="ml-2">
<div>
{
onNameClick ?
<div
onClick={() => onNameClick({name, subTitle, src, id})}
className="avatar-status-name clickable">{name}
</div>
:
<div className="avatar-status-name"><a href="javascript:void(0)">
{name}</a>
</div>
}
<span>{suffix}</span>
</div>
<div className="text-muted avatar-status-subtitle">{subTitle}</div>
</div>
</div>
)
}
AvatarStatus.propTypes = {
name: PropTypes.string,
src: PropTypes.string,
type: PropTypes.string,
onNameClick: PropTypes.func
}
export default AvatarStatus;
https://reactjs.org/docs/components-and-props.html
components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.
codepen example
I found the solution
index.js
render: (_, record) => (
<Flex>
<AvatarStatus
shape="square"
size={50}
src={record.artwork}
name={record.title}
subTitle={record.artist}/>
</Flex>
),
I am working on a React website. I am using a function component to render a piece of code by mapping the array. This is the code
import React from 'react'
import './DedicatedServer.css'
function DedicatedServer() {
const features = [
{
id: 1,
title: "Performance",
text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
},
{
id: 2,
title: "Secure",
text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
},
{
id: 3,
title: "Speed",
text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
},
{
id: 4,
title: "Price",
text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
},
{
id: 5,
title: "Uptime",
text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
},
{
id: 6,
title: "Live Support",
text: "Random text long enough to take you anywhere. I am not sure what to write right now but it will come out to be good"
},
]
return (
<div className="dedicated-server-container">
<div>
<h2 className="dedicated-server-heading">100GBPS for your needs</h2>
<p className="dedicated-server-text">100GBPS provides you with unrivalled performance, support, and reliability</p>
<p className="dedicated-server-text">Everything you can think of when you want to buy a dedicated server</p>
<div className="dedicated-features">
{features.map((feature, i) => {
<div key={i} className="dedicated-feature">
<h3 className="feature-heading">{feature.title}</h3>
<p className="feature-text">{feature.text}</p>
</div>
})}
<h1>Hello there!</h1>
</div>
</div>
</div>
)
}
export default DedicatedServer
Everything else works as expected but the block inside the curly braces does not render. I checked the console and there are no errors either.
I checked out some answers on Stack overflow related to problem with rendering but I am following everything and I am not really sure what am I missing.
I am using the same method in another file and it works just fine. I know this is a pretty simple problem and I am missing something really silly here but can you point out what is the issue here?
This is the piece of code for the other file and it works just fine.
import React from 'react'
import cloudlinux from './vector-logo/cloudlinux.svg'
import litespeed from './vector-logo/litespeed.svg'
import letsencrypt from './vector-logo/lets-encrypt.svg'
import cloudflare from './vector-logo/cloudflare.svg'
import cpanel from './vector-logo/cpanel.svg'
import './Vendors.css'
function Vendors() {
const vendorList = [
{
id: 1,
title: "Cloudflare",
img: `${cloudflare}`
},
{
id: 2,
title: "LiteSpeed",
img: `${litespeed}`
},
{
id: 3,
title: "Let's Encrypt",
img: `${letsencrypt}`
},
{
id: 4,
title: "Cloud Linux",
img: `${cloudlinux}`
},
{
id: 5,
title: "cPanel",
img: `${cpanel}`
}
]
return (
<div className="vendor-div">
<h2 className="vendor-text">Our Vendors</h2>
<div key={vendorList.id} className="vendors">
{vendorList.map((vendors, index) => (
<img key={index} className="vendor-image" alt={vendors.title} src={vendors.img}/>
))}
</div>
</div>
)
}
export default Vendors
This is the answer I found on stack overflow and I am guessing that this is not the problem here.
Link to the problem
You have to return the created div from inside the map like this
{features.map((feature, i) => {
return <div key={i} className="dedicated-feature">
<h3 className="feature-heading">{feature.title}</h3>
<p className="feature-text">{feature.text}</p>
</div>
})}
Alternatively you can use parenthesis instead of {} in the map functions. Parenthesis will implicitly return the JSX inside of them
{features.map((feature, i) => (
<div key={i} className="dedicated-feature">
<h3 className="feature-heading">{feature.title}</h3>
<p className="feature-text">{feature.text}</p>
</div>
))}
I'm trying to display images in a shopping cart i'm making but its not showing up. Do i have to import each image? I know my paths are fine because it worked before.I think there might be something wrong in my product.js file but I can't figure it out.
Here is my Product.js
import React, { Component, PropTypes } from 'react';
class Product extends Component {
handleClick = () => {
const { id, addToCart, removeFromCart, isInCart } = this.props;
if (isInCart) {
removeFromCart(id);
} else {
addToCart(id);
}
}
render() {
const { name, price, currency, image, url, isInCart } = this.props;
return (
<div className="product thumbnail">
<img src={image} alt="product" />
<div className="caption">
<h3>
<a href={url}>{name}</a>
</h3>
<div className="product__price">{price} {currency}</div>
<div className="product__button-wrap">
<button
className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}
onClick={this.handleClick}>
{isInCart ? 'Remove' : 'Add to cart'}
</button>
</div>
</div>
</div>
);
}
}
Product.propTypes = {
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
price: PropTypes.number,
currency: PropTypes.string,
image: PropTypes.string,
url: PropTypes.string,
isInCart: PropTypes.bool.isRequired,
addToCart: PropTypes.func.isRequired,
removeFromCart: PropTypes.func.isRequired,
}
export default Product;
The data comes from this product.js
const data = [
{
id: 1,
name: 'Reggae Blaster',
price: 10,
currency: 'GOLD',
image: '../assets/blaster_1.png'
},
{
id: 2,
name: 'Juicy Blaster',
price: 10,
currency: 'GOLD',
image: 'images/02.jpg'
},
{
id: 4,
name: 'Full Body Reggae Armor',
price: 20,
currency: 'GOLD',
image: 'images/04.jpg'
},
{
id: 6,
name: 'Reggae Spikes Left',
price: 5,
currency: 'GOLD',
image: 'images/06.jpg'
},
{
id: 5,
name: 'Reggae Spikes Right',
price: 5,
currency: 'GOLD',
image: 'images/05.jpg'
},
{
id: 3,
name: 'Black Full Body Reggae Armor',
price: 20,
currency: 'GOLD',
image: 'images/03.jpg'
}
];
export default data;
I am pulling all the data except the images just don't show up
Assuming that you are using webpack, you need to import the image in order to display it like
<img src={require('images/06.jpg')} alt="product" />
Now that your image data is dynamic,
directly specifying the import path like
<img src={require(image)} alt="product" />
doesn't work.
However you can import the image by making use of template literals like
<img src={require(`${image}`)} alt="product" />
So your code will look like
render() {
const { name, price, currency, image, url, isInCart } = this.props;
return (
<div className="product thumbnail">
<img src={require(`${image}`)} alt="product" />
<div className="caption">
<h3>
<a href={url}>{name}</a>
</h3>
<div className="product__price">{price} {currency}</div>
<div className="product__button-wrap">
<button
className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}
onClick={this.handleClick}>
{isInCart ? 'Remove' : 'Add to cart'}
</button>
</div>
</div>
</div>
);
}
P.S. Also make sure that your image path is relative to the file you are importing them in.
img src={require(${filePath})}
-- working
you also need to add default to get exact URL
img src={require(`${filePath}.default`)}
I adding this comment so that future guys can benefit.
So the problem I faced was I had an array of people, and I needed to display the profile picture of each person
Solution
2 files :
data.js which contains an exported JSON object
main.js which has my react component
Step#1 : data.js
in data.js import all your local image asset files that you need.
ex.
import ProfilePicN from "./ProfilePicN.jpg";
export default [
{
"name": "PersonN",
"image": ProfilePicN
}
]
*important: no quotes around the import, quotes on everything else as they are all literals
Step#2:
import data from "./data.
.
.
.
/*inside the react component*/
{
data.map((dataItem,key)=> {
<img src={dataItem.image}>
})
}
You have to put those images in folder where your bundled application lives.