The code below is my data.jsx file where I used to store images, the title of the images, and description of the images. I have a problem importing images from another folder named Images. The Images folder and data.jsx file are both inside my component file
The vs code compiled it successfully but when I run it I just cannot see the result.
import img1 from './Images/jisoo.png'
import img2 from './Images/blackpink.png'
import img3 from './Images/jennie.jpg'
export const sliderItems = [
{
id:1,
img:{img1},
title:"CNY SALES",
desc:"DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR THE BEST SELLING PRODUCTS.",
bg:"f5fafd",
},
{
id:2,
img:{img2},
title:"ANY SALES",
desc:"DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR THE BEST SELLING PRODUCTS.",
bg:"fcf1ed",
},
{
id:3,
img:{img3},
title:"BNY SALES",
desc:"DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR THE BEST SELLING PRODUCTS.",
bg:"fbf0f4",
}]
Click on this link and you can the picture of my source code
When you use { img } outside jsx(html) this will create an js object.
You are doing something like this which is not correct.
{
id:3,
img:{img3 : img3},
title:"BNY SALES",
desc:"DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR THE BEST SELLING PRODUCTS.",
bg:"fbf0f4",
}
Use like this
{
id:3,
img:img3,
title:"BNY SALES",
desc:"DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR THE BEST SELLING PRODUCTS.",
bg:"fbf0f4",
}
Related
I have a little problem. I don't know how to pass this local images dynamicly.
Lets say I have API which returns static 6 store schema like that.
stores: [{id:1, name: "Wallmart"}, {id: 2, name: "Amazon"}];
and I have some images called store1.jpg, store2.jpg ...etc.
So I import images like that.
import store1 from "./store1.jpg"
So I need to loop these images dynamicly according to id.
{
stores.map((store) => (
<img src={`store${store.id}`} />
)
}
So, My question is what is best way to do that. maybe I can create some object which contains all images or import all images like that. I didn't check this version maybe it's not working at all. It doesn't looks like proper way. Can someone just advice me something who have experinced with that ?
Forget about importing the images, and just downright use the path to the images in the stores.map function.
<img src={"store" + store.id + ".jpg"} />
I found this type of solution because I figure out that I also have colors. I add all my images into public/images folder
export const stores : any = {
store1:{
id: 1,
src: "/images/store1.png",
tertiary: "#000",
primary: "#FFF",
},
store2:{
id: 2,
src: "/images/store2.png",
tertiary: "#999",
primary: "#aaa",
}
...
}
so I import stores and loop like that.
import {stores} from "./constants"
{
store.map((item:any) => (
<StoreCatalogCard
title={item.name}
img={stores[`store${item.id}`].src}
primaryColor={stores[`store${item.id}`].primary}
tertiaryColor={stores[`store${item.id}`].tertiary}
light={true}
/>
))
}
So I'm trying to make the addition of project easier for me with a json data.
Basically I'm creating blocks of projects and each project comes with an image, however even when the id == to the name I gave the image, the image does not render. Is there is any option for that or should I just give up on json files ?
what I'm trying to re-do
What I'm actually getting
The reactjs code
import Pdata from "../../api/projects.json";
import p1 from "../../img/Project/PoleAnglais.png";
import p2 from "../../img/Project/I-Art.png";
import p3 from "../../img/Project/Hestia.png";
import p4 from "../../img/Project/EvlV1.png";
import p5 from "../../img/Project/Kelly.png";
import p6 from "../../img/Project/EthLnyV2.png";
import { Component } from "react";
class Plist extends Component {
render() {
return (
<div
className="project-list"
data-aos="fade-right"
data-aos-duration="1200"
>
{Pdata.map((projectDetail, index) => {
return (
<div className="project-block">
<h2 className="project-title">{projectDetail.title}</h2>
<p className="date">{projectDetail.date}</p>
<p className="project-desc">{projectDetail.desc}</p>
<img src={projectDetail.id} alt="" />
<p className="madewith">made with {projectDetail.tags}</p>
</div>
);
})}
</div>
);
}
}
export default Plist;
The json data
[
{
"id": "p1",
"title": "Pole Anglais",
"date": "16/10/2019",
"desc": "This project was in association with Filip Zafirovski, my English teacher by the time who wanted students to get a source of inspiration by publishing articles and/or their work. It was my very first web project, and was kind of hard to pull off but I still enjoyed it.Since for the very first time i coded for a project and not myself.",
"tags": "Loads of crap"
},
{
"id": "p2",
"title": "Project I.Art",
"date": "3/07/2021",
"desc": "In France to go to college you have to get a diploma, which requires multiple exams to be validated. One of the subjects I had to do a presentation on was Art. I decided to create an idea around an Artificial Intelligence who would create art based on the likes and dislikes of the spectator. This panel is a website made for the occasion.",
"tags": "Html,Scss, & AOS librairie"
},
{
"id": "p3",
"title": "Hestia Real Estate",
"date": "18-26/10/2021",
"desc": "At the very start of my student life #hetic, They grouped student randomly to make a project. The subject of the project was to create an agency, a fake web-app and website that sells premium submarines to plus ultra rich people. For that project I designed the website of the agency, and the app for the complex.",
"tags": "Html & Scss"
},
{
"id": "p4",
"title": "EvL First Design",
"date": "30/10/2021",
"desc": "Before the design and dev of this portfolio, I had made a portfolio where I only putted my socials link. All of that because I had no idea of what to put on it. Even if I was satisfied with the first version it did not in any case represented the mood and emotion I wanted it to give. And so I gave birth to the actual design of the website on the 11/11/2021",
"tags": "Nextjs & Scss"
},
{
"id": "p5",
"title": "Kelly's Portfolio",
"date": "3/07/2021",
"desc": "Sometimes after arriving at my college, I met a freshly made friend who wanted to publish her portfolio. She knew how to design and do plenty others thing. To She didn't really like to code and was making her website with Wix. To which I proposed to remake her website by coding it myself.",
"tags": "VueJs & Scss"
},
{
"id": "p6",
"title": "EthLny V2",
"date": "11-12/11/2021",
"desc": "After doing the amazing portfolio of Kelly, I was kind of disappointed with my own. So I decided to remake a new design. Use a Random language, study the color psychology, searched a tagline. And TA-DA here it is, the website you're in right now is the result of 7 hours of researching, designing and coding and debugging.",
"tags": "ReactJs, Scss & AOS librairy"
}
]
Put your images into object, so keys would be ids from json,and values - URLs to your images. Right now you are just passing string like "p1" and "p5" into src. It is not equivalent to passing value of variable with name p1 or p5.
Fast way to create such object would be this:
import p1 from "../../img/Project/PoleAnglais.png";
import p2 from "../../img/Project/I-Art.png";
import p3 from "../../img/Project/Hestia.png";
import p4 from "../../img/Project/EvlV1.png";
import p5 from "../../img/Project/Kelly.png";
import p6 from "../../img/Project/EthLnyV2.png";
let images = {
p1, p2, p3, p4, p5, p6
}
/**
It is same as let images = {p1: p1, p2: p2, p3: p3, p4: p4, p5: p5, p6: p6};
*/
Then, inside your component use id from JSON as a key:
<img src={images[projectDetail.id]} alt=""/>
This way you will get actual value of variable p1 (and others).
I think the image is rendering but it is just too small to see
try adding width and height.
<img style={{width: 200px, height: 200px}} src={projectDetail.id} alt="" />
I think this will solve your problem. instead of importing each image, either create a map that points P* to your image addresses or rename your images in a way that you can do this:
{Pdata.map((projectDetail, index) => {
return (
<div className="project-block">
<h2 className="project-title">{projectDetail.title}</h2>
<p className="date">{projectDetail.date}</p>
<p className="project-desc">{projectDetail.desc}</p>
<img src={`../../img/Project/${projectDetail.id}.png`} alt="" /> // <====the change
<p className="madewith">made with {projectDetail.tags}</p>
</div>
);
})}
you can also add an image prop to your json pointing to the right image, but the json might be out of your hands to change.
I am trying this reactjs. I am getting the following 'not a constructor error'
version used: "vis-network": "^7.4.2",
import { Network, DataSet } from "vis-network";
const NODES = new DataSet({});
NODES.add([
{
id: "1",
label: "start",
final: true,
x: -184,
y: -41
},
{
id: "2",
label: "Node 1",
final: false,
x: 11,
y: -40
}]);
This is how I resolved the issue. I changed the import statement
import { Network } from "vis-network/peer/esm/vis-network";
import { DataSet } from "vis-data/peer/esm/vis-data"
I'm going to post the answer found from https://github.com/visjs/vis-network/issues/588
vis-network bundles everything, many things multiple times. It throws these and other errors in many circumstances. Don't use it. It will be deprecated and removed eventually.
vis-network/standalone bundles everything (polyfills + Vis Data). If you use this you have to use the DataSet exported by this. The downside of this is that it works only on it's own, it will fail when used together with Vis Timeline etc.
vis-network/peer bundles polyfills only. You have to use DataSet from vis-data/peer. An advantage here is that it works together with Vis Timeline etc.
vis-network/esnext bundles nothing. You have to supply all dependencies yourself and use DataSet from vis-data/esnext. The advantage in this is that you can reuse polyfills and other dependencies from your app, reducing bundle size.
I want to make an app where the admins can create "global" forms that other users can fill in. So I need these global forms to be dynamically rendered, and they are kind of big (30+ fields) and are divided in stages (e.g. stage 1 is for personal info, stage 2 is for job skills, etc).
I thought of receiving these "global" forms via JSON, something like this:
{
"filledBy":"User",
"stages":[
{
"id":1,
"name":"Personal information",
"fields":[
{
"id":1,
"type":"email",
"name":"email",
"label":"E-mail",
"placeholder":"name#company.com",
"value":"",
"rules":{
"required":true
}
},
{
"id":2,
"type":"text",
"name":"name",
"label":"Name",
"placeholder":"John Smith",
"value":"",
"pattern":"[A-Za-z]",
"rules":{
"required":true,
"minLength":2,
"maxLength":15
}
}
]
},
{
"id":2,
"name":"Job profile",
"fields":[
{
"id":1,
"type":"multi",
"name":"workExperience",
"subfields":[
{
"id":1,
"type":"text",
"name":"position",
"label":"Position",
"placeholder":"CEO",
"value":"",
"rules":{
"required":true,
"minLength":3,
"maxLength":30
}
},
{
"id":2,
"type":"date",
"name":"startDate",
"label":"Starting date",
"placeholder":"November/2015",
"value":"",
"rules":{
"required":true,
"minValue":"01/01/1970",
"maxValue":"today",
"showAsColumn":true
}
},
{
"id":3,
"type":"date",
"name":"endDate",
"label":"Ending date",
"placeholder":"March/2016",
"value":"",
"rules":{
"required":true,
"minValue":"endDate",
"maxValue":"today",
"showAsColumn":true
}
}
]
}
]
}
]
}
So I created a component called MasterForm that first gets the empty form in componentDidMount(), like a blueprint. Then, once it is fetched, it tries to get the data entered by the user and put it in the form as the value property. After that, it passes the form down to the Stage component which renders every field as an Input component. That way, MasterForm controls the current stage, and allows the user to navigate among stages, and also fetches the data and fills the form. With all the checks and stuff, my MasterForm component got very big (around 700 lines), and every time I update the value of a field in the form, I update the whole form object in the state, so I think that might be slow. Also, to fill in the form with the user's data, I have to copy every nested object and array inside the form object, to avoid mutating the state, and that's also very messy (a lot of const updatedFields = { ...this.state.form.stage.fields } and stuff).
Are there better ways to do this (preferably without Redux)? How could I decouple this huge MasterForm component? Is there a better way to update the form values (other than updating the whole form every time)? or maybe React is smart and doesn't update the whole state, but just the bit that changed... I'm not sure, I'm new to React.
Look into formik https://github.com/jaredpalmer/formik and Yup https://github.com/jquense/yup
Here they are coupled together https://jaredpalmer.com/formik/docs/guides/validation#validationschema
My app is created with create-react-app,
Im iterating with .map through my JSON file where I store the local path to the image but I assume create-react-app changes the pathing somehow and I don't understand how.
const list = this.state.people.map((d, i) => { return <li
key={i}
className="content"
style={{ backgroundImage: `url(${d.Picture})` }}
>
Above is my opening li tag where I loop out the data from my JSON file below:
The Picture in "Adam" works great and shows up on the page, however that is not where the picture is stored. I found that path in chrome dev tools so I just copy pasted.
The example below in "Bob" is the actual path to the img (from root)
I want to be able to put all my images in the images folder and store the correct path in the JSON file
{
"Name": "Adam",
"Born": 1971,
"Picture": "/static/media/elonmusk.3489bce1.jpg"
},
{
"Name": "Bob",
"Born": 1999,
"Picture": "/src/css/images/elonmusk.jpg"
},
Above is my folder structure, App.js is where i render the data, persons.json is where i store the file path, and images is the folder where I have the images
Images need to be statically analysable so you need to require them. Please refer to this for more background info.
So with your example above, instead of using a jsonfile create a people.js file instead like this with require statements for each image:
// file: people.js
const people = [
{
id: 0,
name: 'Adam',
born: 1971,
picture: require('../path/to/image.jpg')
},
{
id: 1,
name: 'Bob',
born: 1999,
picture: require('../path/to/image2.jpg')
}
]
Then you can map over this info to produce the jsx and your images will render.
const people = require('../path/to/people.js')
renderPeopleList () {
return people.map(p =>
<div key={p.id} style={{ backgroundImage: `url(${p.picture})` />
)
}