I am in the process of importing an svg image which path is in a json file. Below is part of the json file:
[
{
"id": 1,
"company": "Photosnap",
"logo": "./images/photosnap.svg",
"new": true,
"featured": true,
"position": "Senior Frontend Developer",
"role": "Frontend",
"level": "Senior",
"postedAt": "1d ago",
"contract": "Full Time",
"location": "USA Only",
"languages": ["HTML", "CSS", "JavaScript"]
},
{
I have created two components. As the app is showing a list of jobs. So the I have a job list component and a job card component.
The code for the job listing component is as follows:
import React from 'react';
import './job-listing.styles.css';
import JobCard from '../job-card/job-card.component.jsx/job-card.component';
import { Component } from 'react';
class JobListing extends Component {
constructor() {
super();
this.state = {
jobs: []
}
};
componentDidMount() {
fetch('/data.json')
.then(response => response.json())
.then(data => this.setState({jobs: data}))
}
render() {
return (
<div>
{this.state.jobs.map(({id, ...otherJobProps}) =>(
<JobCard key={id} {...otherJobProps} />
))}
</div>
)
}
}
export default JobListing;
and for the Job Card component is below:
import React from 'react';
import './job-card.styles.css';
const JobCard = ({company, position, postedAt, contract, location, logo }) => (
<div className='card'>
<img src={logo} alt="logo" width="42" height="42"></img>
<h2>{company}</h2>
<h1>{position}</h1>
<div className='details'>
<h3>{postedAt} ·</h3>
<h3>{contract} ·</h3>
<h3>{location}</h3>
</div>
</div>
)
export default JobCard;
At the moment this is what I get
Any help would be appreciated.
If you are using create-react-app you will want to put static assets such as images (if you are not not ES6 importing images into the code) in the public folder. Try moving these images into the public folder created by create-react-app. You may also need to update the paths. Assuming your structure is:
public
images
photosnap.svg
You may need to change:
"logo": "./images/photosnap.svg",
to:
"logo": "/images/photosnap.svg",
Hopefully that helps!
Related
I'm using SASS and React and I have a particleJS library that I incorporated into my project. Everything is working great although I want my project to have a dark mode and I use particleJS as my background. I want to be able to add conditionals to it like when user clicks on dark mode it somehow changes the data in the particles.json file.
Here is a snippet of the json file:
"background": {
"color": {
"value": "#edf2f8"
},
"position": "50% 50%",
"repeat": "no-repeat",
"size": "20%"
}
I'd like to change the bg-color value to darken the background conditionally. If anyone could help that would be great!
This is also my jsx for particle.js
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import particlesOptions from "./particles.json";
import React, { useCallback } from "react";
const ParticleBackground = () => {
const particlesInit = useCallback((main) => {
loadFull(main);
}, []);
const particlesLoaded = (container) => {
console.log(container);
};
return (
<Particles
init={particlesInit}
loaded={particlesLoaded}
options={particlesOptions}
/>
);
};
export default ParticleBackground;
I have a json array that contains some information :
[
{
"id": 1,
"imageUrl": "./img1.png",
},
{
"id": 2,
"imageUrl": "./img2.png",
}
]
I tried to make a class in which the elements were sorted and added the necessary link to the src, but the information from JSON is not put into JSX.
class Paintings extends Component {
render(){
return(
<ul>
{
paintings.map((s) => {
return (
<div>
<img src={s.imageUrl} alt={s.id} />
</div>
)
})
}
</ul>
)
The question is more general then just about images here. It is to import and loop a JSON object in JSX.
You have some syntax error in your code, I fixed them and shared an online editor implementation for you to have a look as well.
Save your json in a file and import that file in your react code then map the json object.
For the images location, although this is not the recommended method, I think you should put your images under public folder and make sure you have your json file with the correct path.
Sample JSON file I have structured, for your reference:
[
{
"id": 1,
"imageUrl": "image1.png"
},
{
"id": 2,
"imageUrl": "image2.png"
}
]
Then you should be able to use below code to be able to generate it.
import React, { Component } from "react";
import Painting from "./Painting";
class Paintings extends Component {
render() {
return (
<ul>
{Painting.map(({ id, imageUrl }) => (
<div key={id}>
<img src={imageUrl} alt={id} />
</div>
))}
</ul>
);
}
}
export default Paintings;
Here is a basic implementation for you to check out, we are able to map and see the items. I have added some sample images and please pay attention to json file and how its ready to map the JSX image objects based on the file paths.
https://codesandbox.io/s/react-json-into-jsx-19gj1w
I am new to reactJS and I need an answer for this confusing problem.
I have a landing page that I want to use in my home and contact page. What I want is to send external JSON info as props to these pages and every time I create new page.
I have an external JSON file and I want to add it as a props to my landing page file
What is the best practice to do so, should I save within a state and send it as a props or send it directly as a props
JSON File:
{
"landing page" : {
"home": {
"id":1,
"image": "../media/video/Ai Motion5.mp4",
"title" : "MyAkbar for IT consultant & Services",
"description":"Boost up Your Works With our Services. My Incrediable Team is Here to Save Your Time and Money.",
"buttonOne": "Get A Demo"
},
"Contact" : {
"id":2,
"image": "../media/video/Ai Motion5.mp4",
"title" : "Contact",
"description":"sdadasdskdjaskljdas Team is Here to Save Your Time and Money.",
"buttonOne": "Get A Demo"
}
}
}
Home file:
import React, { Component } from 'react'
import LandingPage from "./landingPage/LandingPage"
import WaveSection from './waveSection/WaveSection'
import MyReview from "./reviewSection/MyReview"
import './styles/style.css'
import data from '../../json/data.json';
class Home extends Component{
render(){
return(
<div id='home' className='home'>
<LandingPage
title = {data['landing page'].home.title}
img = {data['landing page'].home.image}
description ={data['landing page'].home.description}
btn = {data['landing page'].home.buttonOne}
/>
<WaveSection/>
<MyReview/>
</div>
)
}
}
export default Home
Contact File:
import React, { Component } from 'react'
import video from '../../media/video/Ai Motion.mp4';
class Contact extends Component{
render(){
return(
<section className='contact-section landingPage-section'>
<div className="container">
<video autoPlay muted loop="True" id='myVideo' src={video}></video>
</div>
</section>
)
}
}
export default Contact
I will go with the first option (not storing it in state) as this data is static and the app does not modify it directly.
Trying to map from a .json file. Keep getting TypeError: Cannot read property 'map' of undefined. I tried to define it like described Here, but no luck.
I can get JSON data to display on the screen when I change div to
<div className="search">
<pre><code>{JSON.stringify(industryList, null, 4)}</code></pre>
</div>
Here is the code:
// #flow
import React from 'react';
import { Row, Col } from 'reactstrap';
import industryList from './industryList';
const AnalyticsDashboardPage = ({industryList = []}) => {
return (
<React.Fragment>
<div className="search">
{industryList.load.map( (industryList) => (
<div>
<h3>{industryList}</h3>
</div>
))};
</div>
</React.Fragment>
)};
export default AnalyticsDashboardPage;
industryList.json
{
"industryList": [
{
"Industry": "Aerospace&Defense",
"icon": "mdi mdi-shield-airplane-outline"
},
{
"Industry": "Airlines",
"icon": "mdi mdi-airplane-takeoff"
},
{
"Industry": "AutoComponents",
"icon": "mdi mdi-engine"
},
{
"Industry": "Automobiles",
"icon": "mdi mdi-car-estate"
},
{
"Industry": "Banking",
"icon": "mdi mdi-bank-outline"
},
{
"Industry": "Building",
"icon": "uil-building"
}
]
With how you have things named there, the line
{industryList.load.map( (industryList) => (
should be
{industryList.industryList.map( (industryList) => (
(but I'd suggesting renaming the import to be called something other than industryList, as that's confusing to read).
You'd also need to delete the industryList prop in the component, that's shadowing the import. so the full correct file with some renames for clarity:
import React from 'react';
import { Row, Col } from 'reactstrap';
import industryListData from './industryList';
const AnalyticsDashboardPage = () => {
return (
<React.Fragment>
<div className="search">
{industryListData.industryList.map( (industryListItem) => (
<div>
<h3>{industryListItem}</h3>
</div>
))};
</div>
</React.Fragment>
)};
export default AnalyticsDashboardPage;
I am getting an error in the Chrome Dev Tools Console when using the react-text-marquee module in react.
I am not sure how to resolve this issue without changing the output to a string instead of JSX.
I should clarify that the functionality of the page is actually working correct, however it would be nice to get rid of errors in case they cause issues down the line.
This is the chrome console error:
09:43:29.747 index.js:2177 Warning: Failed prop type: Invalid prop `text` of type `array` supplied to `Marquee`, expected `string`.
in Marquee (at Session.js:86)
in Session (at Content.js:83)
in div (at Content.js:88)
in Content (at App.js:13)
in div (at App.js:11)
in App (at index.js:9)
__stack_frame_overlay_proxy_console__ # index.js:2177
The complete Session.js code
import React from 'react';
import Marquee from 'react-text-marquee';
import ReactDOMServer from 'react-dom/server';
class Session extends React.Component {
constructor(props) {
super(props);
this.state = {
"showConceptLogo" : true,
"logo" : "logo",
"filmTitle": "2D Justice League",
"classification": "PG",
"sessionAttributes": [
{
"key": "VMAX",
"text": "VMAX",
"color": "yellow",
"background": "red"
},
{
"key": "Gold",
"text": "Gold"
},
{
"key": "Vjnr",
"text": "Vjnr"
},
{
"key": "VPrem",
"text": "VPrem"
},
{
"key": "FWTC",
"text": "FWTC"
},
{
"key": "CC",
"text": "CC"
}
],
"screeningTime": "4:00PM"
}
}
RenderAttributesElement(attr) {
return (
<span style={{color: attr.color, backgroundColor: attr.background}}>{attr.text} </span>
);
}
ConceptLogo(props) {
if (props.display) {
return (
<div className="col-md-1">
<h2>{props.logo}</h2>
</div>
);
}
return null;
}
render() {
return (
<div className="row">
<this.ConceptLogo logo={this.state.logo} display={this.state.showConceptLogo} />
<div className="col-md-6">
<h2>{this.state.filmTitle}</h2>
</div>
<div className="col-md-1">
<h2>{this.state.classification}</h2>
</div>
<div className="col-md-3">
<Marquee hoverToStop={true} loop={true} leading={3000} trailing={3000} text={this.state.sessionAttributes.map(this.RenderAttributesElement)} />
</div>
<div className="col-md-1">
<h2>{this.state.screeningTime}</h2>
</div>
</div>
);
}
}
export default Session;
Both of following options basically just hide the warning.
Option 1: change type of the text prop in runtime:
import PropTypes from 'prop-types';
Marquee.propTypes.text = PropTypes.oneOfType([
PropTypes.string,
PropTypes.array,
]);
However, this might pose a problem if the author of the library decides to make a change that will render your usage of their component incorrect.
Option 2: fork the repository, change propTypes field in source, and, after updating the version in package.json of the library, setup a link to it in your project's package.json:
"react-text-marquee": "git://github.com/yourusername/react-text-marquee"
After that you run npm install and now you have to maintain your copy of the library in case the author does bugfixes or something like that. You might even describe prop type better and make a pull request to the original repository.