How are you?
My situation is the next. I am passing an array with information to a Component to render with a map().
The name and title are perfect for me.
But I have trouble passing the SRC of the image. I've already tried all the ways I could think of, but nothing.
In the array I leave different paths that I have tried and nothing.
Thaanks!
MY COMPONENT:
import React from 'react';
import { TeampeopleData } from '../Components/TeampeopleData';
function Aboutus() {
return (
<div className='about'>
<div className="about-text">
<h1 className='about-text-title'>ABOUT US</h1>
<h2 className="about-text-big">We work until we see the invisible</h2>
<h2 className="about-text-small">Because it is our passion to serve our clients to the utmost satisfaction, we go against all odds to meet your expectations. We can’t promise you the world but here’s one thing we can assure you: We like to be as clear as we possibly can. We’ll hound you – one, two, three meetings – as many as it takes to get it right! We’re not perfectionists. We just want to make YOU the happiest.
</h2>
</div>
<div className="about-team">
<h2 className="about-team-title">Our Team</h2>
<div className="about-team-people">
{TeampeopleData.map((item)=>{
return(
<div className='people'>
<div className="people-img">
<img src={item.photo} alt="team-people" className="team-people-photo"/>
</div>
<h2 className="people-name">{item.name}</h2>
<p className="people-title">{item.title}</p>
</div>
)
})}
</div>
</div>
</div>
)
}
export default Aboutus
MY ARRAY
import people1 from '../img/people1.jpg';
export const TeampeopleData =[
{
photo: {people1},
name: 'Blas Garcia',
title: 'Founder'
},
{
photo: '/src/img/people1.jpg',
name: 'Patrick O’donnel',
title: 'Marketing'
},
{
photo: '../img/people1.jpg',
name: 'Olivia Wralikszowa',
title: 'Art Director'
}
]
enter image description here
Just remove the bracket around the people1 and it'll work fine.
{
photo: people1,
name: 'Blas Garcia',
title: 'Founder'
},
Related
I am intermediate with React Hooks and trying to understand how to use useRouteMatch or any good solution to achieve the case below.
I have looked online and different examples but i cant seem to figure out based on a list of items, how to create a link that a user would click then get sent to the id page ex: book/1/ after clicking on one book on page books/
Data.js
export const books = [
{
id: 1,
book_name: "A new year, a new era",
},
{
id: 2,
book_name: "You got to start somewhere",
},
{
id: 3,
book_name: "The tale of a gemini",
},
]
App.js
import { books } from './components/Data';
function App() {
const booksData = books;
return (
<div className="header">
{booksData.map((data) => (
<div className="book-id" key={data.id}>
<div className="book-name"><b>{`${data.book_name}`}</b>
</div><br/><br/>
</div>))}
</div>
);
}
export default App;
If anybody could show me how to do it from the example above, i would be able to understand that clearly.
Any help would be really appreciated.
Thanks in advance.
Are you just looking for the Link component?
import { Link } from 'react-router-dom';
// later in your code...
<Link to="/books/1">Book 1</Link>
// or you can do it dynamically like so:
<Link to={`/books/${book.id}`}>Book {book.id}</Link>
I have a js file with an array of objects, I am trying to load the attributes dynamically with a component and I cannot seem to figure out how to pass icons to the rendering component.
Here is the component that I am using to render the data:
import React, { Component } from 'react';
import SkillData from '../../store/skillData';
import './SkillsCard.css';
class SkillsCard extends Component {
state = { }
renderSkills = () =>
SkillData.map((skill, _id) =>
<div key={_id} className="skillCard col-sm-3 m-2">
<div className="top">
{/* ***line in question*** */}
<div className="icon">{skill.icon}</div>
<h5>{skill.title}</h5>
</div>
<div className="bottom">
{skill.techs.map((tech,index)=>(
<div className='skillCardList' key={index}> {tech}</div>
))}
</div>
</div>
);
render() {
return (
this.renderSkills()
);
}
}
export default SkillsCard;
and here is the file that I am pulling data from:
const SkillData = [
{
_id: '1',
icon: '../../assets/icons/frontend.png',
title: 'Front End',
techs: ['HTML5', 'CSS | SCSS', 'JavaScript', 'React | Redux', 'Angular']
},
{
_id: '2',
icon: '../../assets/icons/server.png',
title: 'Back End',
techs: ['NodeJS', 'Express', 'Postman', 'Authentication | Authorization']
},
{
_id: '3',
icon: '../../assets/icons/database.png',
title: 'Databases',
techs: ['MongoDB', 'mySQL', 'PostgreSQL']
}
]
export default SkillData
The issue that I am having is that I cannot get the path name to the icons to evaluate and actually render the icon; Instead my component renders the text, listed on the path. All the other attributes render just fine! Any thoughts?
Because you're just rendering the string value to the page:
<div className="icon">{skill.icon}</div>
Did you mean to use an <img> element?:
<div className="icon">
<img src={skill.icon} />
</div>
This worked when I added
const icons = require.context('../assets/icons', true);
in the SKillData.js file and set the paths to:
icons('./iconName.png'),
Thanks a million, David!
This works for me.
Direct require from your local assets folder, so you dont need the complexity to head file import a link from a json file request
{/* line in question */}
<div className="icon">
<img src={require(`${skill.icon}`)} />
</div>
I have created an RSS feed consuming react component. Currently it only displays the title of the first news item. I want to be able to map all of the post titles into the render.
https://codesandbox.io/s/react-rss-feed-xtt86 - This is where my code is located. You will have to use firefox with CORS add on for the post items to come through.
this.state = { news: [{}, {}] }; <-- This gets populated with the news items
<div className="panel-list">{this.state.news[1].title}</div> <!-- This is how it is being rendered onto the page at the minute.
I am new to react so sorry for the nooby question! Can't wait to get better.
Thank you all so much! Going to be pro with React in no time (;
You can simply use map to render multiple components from an array:
this.state = { news: [{}, {}] };
...
const news = this.state.news.map((newsItem) =>
<div key={newsItem.id} className="panel-list">{newsItem.title}</div>
);
Note that I added a key attribute to each div. This is important to give the elements a stable identity as explained here. It needs to be an unique identifier for each news item ("id" is used here as an example).
To render the news variable, you just need to use curly braces. For example, to render it in a div:
<div>{news}</div>
You could also render the list directly, without creating a variable (which is a bit messy, though):
<div>
{this.state.news.map((newsItem) =>
<div key={newsItem.id} className="panel-list">{newsItem.title}</div>
)}
</div>
You can do something like the example below
var news = [{
title: 'first title',
date: 'first news date'
},
{
title: 'second title',
date: 'second news date'
},
{
title: 'third title',
date: 'third news date'
}
]
const panelList = document.getElementById('panel-list')
news.map(item => {
panelList.innerHTML += `<div class="panel"><h2 class="panel-title"> ${item.title}</h2><span>${item.date}</span></div>`
})
<div id="panel-list">
</div>
Except the fact that in React you use JSX and you can make that map dirrectly in the render function.
The above pure javascript code would translate into :
<div className="panel-list" >
{this.state.news.map(item => (
<div className="panel" key={item.title}>
<h2 className="panel-title">{item.title}</h2>
<span>{item.date}</span>
</div>
))}
</div>
Also, like it has been mentioned in another comment, don't forget to add key attribute to each element inside the map ( each panel ) so React can identify the items correctly.
I've been trying to learn React in spite of a major lack of Javascript experience recently, and I've hit a bit of an unexpected snag. I am rewriting my personal website (which is basically static HTML with some PHP on the backend), and one of the things I want to do is load the details of my CV from an external JSON file (with the next step being to move from a static JSON file to a call to an endpoint that will return the data).
In my CV, I have a list of achievements for several of the jobs, and in a few of these I want to return a small amount of markup (in one case a link to a patent I was the inventor on and in another just a span applying styling to a single sentence to call attention to some pro-bono work). I understand that I can use the dangerouslySetInnerHTML() method in React to pass in the String containing the markup and have it rendered... bu I can't seem to get it to work.
Here is the component in question:
import React, {Component} from 'react';
class WorkEntry extends Component {
constructor(props) {
super(props);
var _this = this;
this.usedSkillsTags = [];
this.responsibilitiesTags = [];
this.achievementsTags = [];
this.props.technologiesUsed.forEach(function (item) {
_this.usedSkillsTags.push(<li>{item}</li>)
});
this.props.responsibilities.forEach(function (item) {
_this.responsibilitiesTags.push(<li>{item}</li>)
});
this.props.achievements.forEach(function (item) {
if(item.indexOf("<") > -1 && item != null ) {
_this.achievementsTags.push(<li dangerouslySetInnerHTML={ { _html : item.toString() } }/>)
}
else{
_this.achievementsTags.push(<li>{item}</li>)
}
});
}
render() {
return (
<div>
<div class="row">
<div class="well">
<div class="row">
<div class="col-sm-12">
<h3>{this.props.companyName} -
<small> {this.props.jobTitle}</small>
</h3>
</div>
</div>
<div class="row">
<div class="col-sm-12">{this.props.startDate} - {this.props.endDate}</div>
</div>
<div class="row">
<div class="col-sm-4">
<h4 class="text-center">Skills Used</h4>
<ul class="wrapped-list">
{this.usedSkillsTags}
</ul>
</div>
<div class="col-sm-8">
<h4 class="text-center">Responsibilities</h4>
<ul>
{this.responsibilitiesTags}
</ul>
</div>
</div>
{ this.achievementsTags.length > 0 &&
<div class="row">
<div class="col-sm-12">
<h4 class="text-center">Notable Projects and Achievements</h4>
<ul>
{this.achievementsTags}
</ul>
</div>
</div>
}
</div>
</div>
</div>
);
}
}
export default WorkEntry;
And here is the Json that is causing the issue:
{
"companyName": "Eloquence Communications",
"jobTitle": "Lead Developer",
"startDate": "January 2013",
"endDate": "February 2014",
"technologiesUsed": [
"Java",
"SQL",
"Idea",
"Bamboo",
"Nexus",
"Maven",
"Git",
"JavaFX",
"Python"
],
"responsibilities": [
"Designed overall architecture for hospital Nurse Call System",
"Managed complex build process for multiple Java applications using Git, Maven, Nexus, and Bamboo",
"Proposed idea which was eventually patented by employer",
"Lead a small team of developers to convert an idea into a product"
],
"achievements": [
"After proposing a method of nursing staff tracking and authentication using NFC, was named as an inventor on <a href='http://patents.justia.com/patent/20140330575'>patent application #20140330575</a>"
]
}
Finally, here is the error I see:
I've obviously read the link in the error message, but I can see no difference between the code in the documentation and my own. Can anyone lend some expertise here?
dangerouslySetInnerHTML needs __html(note two underscores) and not _html
Change it to
dangerouslySetInnerHTML={ { __html : item.toString() } }
Trying to figure out how can i get the link to actually render as a link. Right now after i read this line of text from my Json file, react renders the hyperlink as literal text, it doesn't render it as a link.
someData.json
[{
"about": "John has a blog you can read here."
}]
someComponent.js
const Person = Component({
store: Store('/companies'),
render(){
var company = this.store.value()[this.props.companyId];
return (
<div id='ft-interviewee className="all-100"'>
<p className="section-heading bold padding-top-20 font-22">Person</p>
<div className="column-group horizontal-gutters">
<div className="all-10">
<div>{company.people.person.about}</div>
</div>
</div>
)
}
});
You can use dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={ { __html: company.people.person.about } }></div>
Example
Another option and I think cheap to use is NPM React Plugin
https://www.npmjs.com/package/react-html-parser
I have used this and feeling good.