I am trying to render image from array by placing its name in middle of <img> link.
At this time I have ran out of links that could help me...
I tried everything that came to my mind. Everything displays as it should except image...!
this is array:
cars: [
{
'carname': '2013 Toyota GT86',
'owner': 'Ryan',
'desc': 'Aero Paket, BC Coilover, 3sdm 0.01 black matte, Invidia N1 Catback, Valenti taillights, camouflage vinyls, Vortech supercharger incl. oil cooler - 325hp daily driver',
'image': 'toyota'
}]
Render section:
render() {
const cars = this.state.cars.map((car, i) => {
return (
<div key={i}>
<div className="col-md-12 cBusiness">
<h2>
{ car.carname }
</h2>
<p>Owner: { car.owner }</p>
<p>{ car.desc }</p>
<p>
<img src={"pages/upload/{car.image}.jpg"} />
</p>
</div>
</div>
);
});
structure:
Do something like this:
<img src={`pages/upload/${car.image}.jpg`} />
Try using template literals:
<img src={`pages/upload/${car.image}.jpg`} />
or old skool for all the IE folks out there:
<img src={"pages/upload/" + car.image + ".jpg"} />
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Related
Im looking for a solution to build a Template website in React which displays a Carousel with 3 different Images on the Left Part and a Informational Part on the Right with A Title, some Attributes and a Description. I dont want to Copy and Paste the Website all the Time to rewrite every element and Change the Pictures. The Barebone of my Page is done, i just need the Solution to probably make an Array and depended on the Image which is clicked, youre getting to the mentioned DescriptionPage filled with the Information based on the clicked Image.
const DescriptionPage = () => {
return (
<>
<div className='CardDescriptionContainer'>
<Carousel>
<CarouselItem><img alt="Fool" className='image-carousel' src={Fool} draggable="false"/></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={ThothFool} draggable="false"/></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={JDFool} draggable="false"/></CarouselItem>
</Carousel>
<div className='CardDescription '>
<div className='Title'>
<h1>The Fool</h1>
</div>
<div className='Element'>
<h2>Element</h2>
<p>Air</p>
</div>
<div className='Zodiac'>
<h3>Zodiac / Planet</h3>
<p>Uranus</p>
</div>
<div className='Qualities'>
<h3>Qualities</h3>
<p>Freedom <br/>
Lust for Life<br/>
Beginnings<br/>
Adventure</p>
</div>
<div className='Symbols'>
<h3>Symbols</h3>
<p> White Rose <br/>
Small Bundle<br/>
Small Animal<br/>
Precipice</p>
</div>
<div className='ShortDescription'>
<h2>Description</h2>
<p>Into the Unkown.... this is placeholder Text for the Fool as he is, a Placeholder, the nothing before there is with all the Options to go anywhere and be anyone he'd like to. Pure AIR!</p>
</div>
</div>
</div>
</>
)
}
export default DescriptionPage
I was trying to find the Correct Syntax and was thinking about Mapping over an Array containing the Data but i dont know how to choose the correct Array or Dataset based on the clicked Image. Would i use useState to change the State of the Page itself or is it the best approach to "load" the Description Page with the Data stored in a different file?
You can write like this, if I understand you correctly
const INTIAL_VALUES = [
{
className: "Title",
heading: "The Fool",
paragraph: ""
},
{
className: "Element",
heading: "Element",
paragraph: "Air"
}, {
className: "Zodiac",
heading: "Zodiac / Planet",
paragraph: "Uranus"
}, {
className: "Qualities",
heading: "Qualities",
paragraph: "Freedom Lust for Life Beginnings Adventure"
}]
const DescriptionPage = () => {
const [state, setState] = useState(INTIAL_VALUES)
return (
<>
<div className='CardDescriptionContainer'>
<Carousel>
<CarouselItem><img alt="Fool" className='image-carousel' src={Fool} draggable="false" /></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={ThothFool} draggable="false" /></CarouselItem>
<CarouselItem><img alt="Fool" className='image-carousel' src={JDFool} draggable="false" /></CarouselItem>
</Carousel>
<div className='CardDescription '>
{state.map((element, key) => (<div key={key} className={element.className}>
<h3>{element.heading}</h3>
<p>{element.paragraph}</p>
</div>))}
</div>
</div>
</>
)
}
export default DescriptionPage
** I want to change the image src on mouseover, i have added multiple images dynamically.**
const Servicesdata = [
{
ID: "01",
title: "Power Generation",
desc:
" We have rich experience in building thermal, hydro, and combined cycle power plants. We provide customized ready-to-deploy solutions for power plants including total EPC and comprehensive Balance of Plant (BOP) and Flue-gas desulfurization (FGD) solutions.",
imgsrc: "https://www.tataprojects.com/images/Transmission-Line.jpg",
imgsrcHover: "https://www.tataprojects.com/images/Sunbstations-min.jpg"
},
{
ID: "02",
title: "Transmission",
desc:
"We have successfully commissioned more than 13,000 kms of transmission lines across multiple voltage levels including 800kv HVDC projects",
imgsrc: "https://www.tataprojects.com/images/Sunbstations-min.jpg",
imgsrcHover: "https://www.tataprojects.com/images/Sunbstations-min.jpg"
},
{
ID: "03",
title: "Substations",
desc:
"Our optimally designed towers and substation structures allow us to reduce conductor wastage ensuring faster construction and on-time delivery.",
imgsrc: "https://www.tataprojects.com/images/Tower-Manufactaring-Unit.jpg",
imgsrcHover: "https://www.tataprojects.com/images/Sunbstations-min.jpg"
},
{
ID: "04",
title: "Tower Manufacturing Unit",
desc:
"We have a state-of-the-art manufacturing unit to manufacture transmission line towers and structures. The unit is spread across 40 acres of land.",
imgsrc: "https://www.tataprojects.com/images/Smart-Grid-min.jpg",
imgsrcHover: "https://www.tataprojects.com/images/Sunbstations-min.jpg"
}
];
export default Servicesdata;
import react from "react";
import Servicesdata from "../data/Servicesdata";
const Services = () => {
return (
<>
<section className="services">
<div className="container mt-5">
<div className="row">
<div className="col-md-12">
<h2 className="text-center heading-style-1">Key Areas</h2>
</div>
</div>
{Servicesdata.map((val, index) => {
return (
<div className="row featurette align-items-center">
<div className="col-md-7">
<h2 className="featurette-heading">{val.title}</h2>
<p className="lead">{val.desc}</p>
</div>
<div className="col-md-5">
<img src={val.imgsrc} className="img-fluid" />
</div>
</div>
);
})}
</div>
</section>
</>
);
};
export default Services;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
We can make use of onMouseOver & onMouseOut event handlers in order to toggle the images of the current hovering image.
We can store the ID of the object in the state when we hover on the image of that particular object
And reset it to "" on mouse out
In render we can check the ID in the state with the object id, if they are matching then use imgsrcHover else use imgsrc
const Servicesdata = [{ID:"01",title:"Power Generation",desc:" We have rich experience in building thermal, hydro, and combined cycle power plants. We provide customized ready-to-deploy solutions for power plants including total EPC and comprehensive Balance of Plant (BOP) and Flue-gas desulfurization (FGD) solutions.",imgsrc:"https://www.tataprojects.com/images/Transmission-Line.jpg",imgsrcHover:"https://www.tataprojects.com/images/Sunbstations-min.jpg"},{ID:"02",title:"Transmission",desc:"We have successfully commissioned more than 13,000 kms of transmission lines across multiple voltage levels including 800kv HVDC projects",imgsrc:"https://www.tataprojects.com/images/Sunbstations-min.jpg",imgsrcHover:"https://www.tataprojects.com/images/Sunbstations-min.jpg"},{ID:"03",title:"Substations",desc:"Our optimally designed towers and substation structures allow us to reduce conductor wastage ensuring faster construction and on-time delivery.",imgsrc:"https://www.tataprojects.com/images/Tower-Manufactaring-Unit.jpg",imgsrcHover:"https://www.tataprojects.com/images/Sunbstations-min.jpg"},{ID:"04",title:"Tower Manufacturing Unit",desc:"We have a state-of-the-art manufacturing unit to manufacture transmission line towers and structures. The unit is spread across 40 acres of land.",imgsrc:"https://www.tataprojects.com/images/Smart-Grid-min.jpg",imgsrcHover:"https://www.tataprojects.com/images/Sunbstations-min.jpg"}];
const { useState } = React;
const Services = () => {
//Store the currently hovered object's id in the state
//Initially it'll be ""
const [currentHoveredId, setCurrentHoveredId] = useState("");
//On mouse over update the id with the cuurent object's ID
const onMouseOver = (id) => {
setCurrentHoveredId(id);
}
//On moving the cursoe out of the image, then reset it to ""
const onMouseOut = () => {
setCurrentHoveredId("");
}
return (
<section className="services">
<div className="container mt-5">
<div className="row">
<div className="col-md-12">
<h2 className="text-center heading-style-1">Key Areas</h2>
</div>
</div>
{Servicesdata.map((val, index) => {
return (
<div className="row featurette align-items-center" key={val.ID}>
<div className="col-md-7">
<h2 className="featurette-heading">{val.title}</h2>
<p className="lead">{val.desc}</p>
</div>
<div className="col-md-5">
{/* Toggle the image source based on the result of the id in state and the id of the current object */}
<img src={currentHoveredId === val.ID ? val.imgsrcHover : val.imgsrc}
className="img-fluid"
onMouseOver={() => {onMouseOver(val.ID)}}
onMouseOut={onMouseOut}/>
</div>
</div>
);
})}
</div>
</section>
);
};
ReactDOM.render(<Services />, document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="react"></div>
I have used your code as it is just added the corresponding event handlers and the state as mentioned above.
Make the following modifications in the code:
this.setState({
servicesData: ServicesData;
})
And call the below function on mouseover,passing the index and the newSrc as parameter:
imgSrcUpdate(index, newSrc) {
let oldData = this.state.servicesData;
oldData[index][src] = newSrc;
this.setState({
servicesData: oldData
})
}
Instead of this:
{Servicesdata.map((val, index) => { ...
Use :
{this.state.servicesData.map((val, index) => {....
My application renders twelve random people fetched from a different website. Everything works fine apart from my modal component(it should render more information about the person you clicked). For some reason whenever I try to render it I get this error 'Modal.js:9 Uncaught TypeError: Cannot read property 'medium' of undefined' and more errors comes with it. I am printing props.modalInfo from the Modal component to the console and it does have all the information I need, but for some reasons it shows that props.modalInfo is undefined when I try to render it. I have never done modal box in React (I am a beginner). Could someone explain me how I can render my Modal and pass all the data successfully? Thank you in advance!
handleClick(id) {
this.setState((prevState) => {
const modalInfoToPass = prevState.employeeList.filter(employee =>
{
if(`${employee.name.first} ${employee.name.last}` === id){
// get only and only one object that fulfils the
// condition
return employee;
}
})
return {
displayModal: true,
// update the modalInfo state
modalInfo: modalInfoToPass
}
})
}
render(){
return (
<div className='container'>
<Header />
<main>
{
this.state.loading ? <h2 className='load-page'>Loading...</h2> :
this.state.employeeList.map(employee =>
<Employee key={`${employee.name.title}
${employee.name.last}`}
employeeInfo={employee}
**handleClick={this.handleClick}**
/>)
}
</main>
<Footer />
**{this.state.displayModal && <Modal modalInfo={this.state.modalInfo} />}**
</div>
);
}
function Modal(props) {
**console.log(props.modalInfo);**
return (
<div className='bg-modal'>
<div className='modal-content'>
<div className='modal-image'>
<img src={props.modalInfo.picture.medium} alt={`${props.modalInfo.name.title} ${props.modalInfo.name.first}`}/>
</div>
<div className='modal-info'>
<p className='name'>{props.modalInfo.name.first} {props.modalInfo.name.last}</p>
<p className='email'>{props.modalInfo.email}</p>
<p className='place'>{props.modalInfo.location.city}</p>
</div>
<hr />
<div className='modal-more-info'>
<p className='number'>{props.modalInfo.cell}</p>
<p className='address'>{`${props.modalInfo.location.street}, ${props.modalInfo.location.state}`}</p>
<p className='postcode'>{props.modalInfo.location.postcode}</p>
<p className='birthday'>{props.modalInfo.dob.date}</p>
</div>
</div>
</div>
);
}
What is id and is it on an employee? If it isn't available, you could just pass what you're filtering for in your handleClick:
handleClick={()=>this.handleClick(`${employee.name.first} ${employee.name.last}`)}
Or, you could just pass the employee:
handleClick={()=>this.handleClick(employee)}
and modify your handler:
handleClick(employee) {
this.setState({modalInfo: employee, displayModal: true})
}
The state
state = {
posts: [],
}
The posts gets an API value of
{
"authors": [
{
"authorName": "Sideney Sheldon",
"authorImageURL": "http..."
},
{
"authorName": "Sideney Sheldon",
"authorImageURL": "http..."
},
....
]
}
code
render(){
const postList = posts.length ? (
posts.map(post => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
</div>
)
})
) :
(
<div className="center">No posts to show</div>
);
return(
{postList}
)
}
The {postlist} returns objects but it returns each object in a new row in the webpage
I want all the results(images) in the same row
can anyone please help?
If you want multiple elements in the same row, you could achieve that with css. Use display: flex(by default flex-direction is row which is what you need) on the wrapper to postList. You can either pass it as a style though JSX or add a class that specifies this property
render(){
const postList = posts.length ? (
posts.map(post => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
</div>
)
})
) : (
<div className="center">No posts to show</div>
);
return(
<div style={{display: 'flex'}}>{postList}</div>
)
}
Here's a CodeSandbox sample I created using your code.
If you're trying to line up the users horizontally (from left to right), CSS is the way to go. In particular, the <div> that is being mapped has, by default, the display: block style which makes it occupy its own row in the page.
To line up divs side by side, you need to somehow apply the display: inline-block style. In my example I used a style prop, but you will likely want to do it in CSS directly.
This is a CSS problem, you should use display: flex together with flex-direction: row on the parent div which will provide the desired result.
posts.map(post,index => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authors[index].authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authors[index].authorName}</h6>
</div>
)
})
) : (
<div className="center">No posts to show</div>
);
Try this
I have a component called "itemSelection" and another one called "Item"
in the itemSelection i just map through an api response like this
<div className="row">
{this.state.items.map(i => <Item name={i.name} quantity={i.quantity} />)}
</div>
in the "Item" component I have like 3 card item with a select button. in its state there is also "quantity" key but that's for the quantity selected by the user of a specific item. So, what I'm try to achieve here is if the user selected one item and quantity of 2, I want to take that in an object and put that object in an array, and if the user selected another item with quantity of 3, I want that in another object and just push that object in the array where I have put the first object to be something like that
[{name: first item, quantity: 2}, {name: second item, quantity: 3}]
here is what I tried
targetValue = (e) => {
e.preventDefault();
let qua = e.target.textContent;
this.setState({quantity: qua, selected: true});
const newQuantity = {name: this.props.name, quantity: qua}
const quantities = [...this.state.quantities];
quantities.push(newQuantity);
this.setState({quantities});
console.log(quantities);
}
The function above is included in the "Item.js" and here is the return function
<div className="col-md-4">
<div className={"card " + (this.state.selected ? "frame" : "")} style={{width: 18+'rem'}}>
<img className="card-img-top" style={{width: 10+'rem', margin: 0+' '+'auto'}} src={this.props.img} alt="Card image cap"/>
<div className="card-body">
<h5 className="card-title">{this.props.name}</h5>
<p clasNames="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<div className="description">
<p className="card-text">30€</p>
<p className={"card-text " + (this.state.selected ? "" : "displayQua")}>Q: {this.state.quantity}</p>
</div>
<button onClick={this.toggleMenu} href="#" style={{width: 100 + '%', margin: 0+' '+'auto'}} className="btn">SELECT</button>
</div>
</div>
<div className="menu">
<div className={this.state.visible ? "" : "visible"}>
<div className="menu">
{_.times(this.props.quantity, i => (
<a onClick={this.targetValue} key={i} href="#">{i + 1}</a>
))}
</div>
</div>
</div>
</div>
The question you have asked is a bit unclear. But as far as I understand there could be 2 issues :
Change const quantities = [...this.state.quantities]; to let quantities = [...this.state.quantities]; since you'll be pushing new values to the array.
let qua = e.target.textContent; not sure if this is the best way to get the value. Try let qua = e.target.value; and pass the value param in anchor tag <a onClick={this.targetValue} value={i+1} key={i} href="#">{i + 1}</a>
Sharing the output for what you tried will definitely help to understand better.
The best way to push elements to a state array in React. You can do this
const newQuantity = {name: this.props.name, quantity: qua};
this.setState(previousState => ({
quantities : [...previousState.quantities, newQuantity]
}));
Also don’t use multiple setStates inside handler function use one that’s enough :)