Any idea why my carousel items are not showing up? - javascript

I am trying display a carousel of images on my page, but it is not displaying the images at all. when I console logged the image url, it is there, but no image at all.
also one more question, what would I use for the key here? I used the image url here as the key
import galleryStyles from "../styles/Gallery.module.css";
import Carousel from "react-bootstrap/Carousel";
const BigGallery = ({ images }) => {
return (
<>
<div>hi </div>
<Carousel interval={4000} className={galleryStyles.Carousel}>
{images.map((image) => {
console.log(image.url); // This logged the correct url
<Carousel.Item key={image.url}>
<img src={image.url} className={galleryStyles.image} />
</Carousel.Item>;
})}
</Carousel>
</>
);
};
export default BigGallery;

Related

The <Thumbnail /> is not showing

This is my Results.js
This is my Thumbnail.js
`import React from "react";
const Thumbnail = ({ result }) => {
return (
<div>
<h1>Thumbnail</h1>
</div>
);
};
export default Thumbnail;`
This is in my index.js
<Results results={results} />
When I want to call Thumbnail in Results.js, why the in Results.js not showing ?
results most likely doesn't have any data. If it did, React would loop through the array and render out a Thumbnail for each item in the array.
To test this, set a simple variable in your file to an array of, let's say, 3 items.
const items = [1,2,3];
Then, use this item to map over the Thumbnail component.
export default function Results() {
...
const items = [1,2,3];
return (
<div>
{items.map(item => (
<Thumbnail result={item} />
)}
</div>
)
You should see then three rendered out Thumbnail components

Style background not showing an image

I can't seem to solve this, The URLs are not showing as images, what can I do?
I think the issue is with the style background image but I'm not sure, the name is showing fine but the image is not.
here is the code:
import React, {useState} from "react";
import TinderCard from "react-tinder-card";
function TinderCards() {
const [people, setPeople] = useState([
{
name:"sonny",
url:"https://upload.wikimedia.org/wikipedia/commons/b/b8/Lola_Astanova.jpg",
},
{
name:"danny",
url:"https://upload.wikimedia.org/wikipedia/commons/b/b8/Lola_Astanova.jpg",
},
]);
// const people = []; array
return (
<div>
<h1>cards</h1>
{people.map((person) => ( <TinderCard
className="swipe"
key={person.name}
preventSwipe={['up', 'down']}
>
<div
// eslint-disable-next-line no-template-curly-in-string
style={{ backgroundImage: 'url(${person.url})' }}
className="card">
<h3>{person.name}</h3>
</div>
</TinderCard>
))}
</div>
);
}
export default TinderCards
That's what I would do as well. Work backwards if stuck. I would think the tics would work. Not showing image equates to? Have you viewed source / what was output?

ReactJS - Java Script: Image is not properly showing inside a <div>

I am building a boat visualizer using AISHub and the external database Contentful.
All the vessels I am interested are injected into a table. When I click on the table I locate the marker (vessel) on the map and the image of that vessel pops up on a sidebar on the right of the map as shown below:
The problem I have is that I should also visualize the image of the vessel, but unfortunately I only visualize a weird icon as shown below:
Below the code:
class Sidebar extends React.Component {
state = {
ships: []
};
async componentDidMount() {
let response = await Client.getEntries({
content_type: 'cashmanCards'
});
const ships = response.items.map((item) => {
const { name, slug, type, company, description, images, companylogo } = item.fields;
return {
name,
slug,
type,
company,
description,
images,
companylogo
};
});
this.setState({
ships
});
}
getFilteredShips = () => {
if (!this.props.activeShip) {
return this.state.ships;
}
return this.state.ships.filter((ship) => this.props.activeShip.name.toLowerCase() === ship.name.toLowerCase());
};
render() {
return (
<div className="map-sidebar">
{this.props.activeShipTypes}
<pre>
{this.getFilteredShips().map((ship) => {
console.log(ship);
return (
<Card className="mb-2">
<CardImg />
<CardBody>
<div className="row">
{/* <div className="column"> */}
<img className="image-sizing-primary" src={ship.companylogo} alt="shipImage" />
</div>
<div>
<img className="image-sizing-secondary" src={ship.images} alt="shipImage" />
</div>
<CardTitle>
<h3 className="thick">{ship.name}</h3>
</CardTitle>
<CardSubtitle>{ship.type}</CardSubtitle>
<CardText>
<br />
<h6>Project Details</h6>
<p>For a description of the project view the specification included</p>
</CardText>
<div class="btn-toolbar">
<SpecsButton />
<Link to="/vessels/Atchafalaya" className="btn btn-primary">
Go to vessel
</Link>
</div>
</CardBody>
</Card>
);
})}
</pre>
</div>
);
}
}
export default Sidebar;
What I have done so far:
1) I console.log() the problem that could be the cause of that weird icon and the result (the value) of the command was a strange path. I can confirm that the command is correct. Also I should say that those images are currently held by an external container called Contentful. Below the path after console log:
Am I missing something from the path?
I am not sure how to move on as all other checks seems correct and this one is the only one that is ringing some bells to me.
Thanks for pointing in the right direction for solving this issue.
#Emanuele , could you please try this instead ?
src = {ship.images.fields.file.url}

Another way to clone a picture & image in a larger view

I'm a beginner developer and I work with Reactjs.
I'm doing a project where there will be a gallery of photos that I brought
from a flickr api service.
Each image will have two buttons:
1.Clone: clicking the clone button should duplicate the image.
2.Expand: clicking an image should display this image in a larger view
How do I clone the image in a different way than I did? (more effective)
How do I large the image without using the 'react-modal'?
I have two components- One of the gallery and the other of the pictures.
my Gallery.js:
handleClone = image => {
this.state.images.push(image);
this.setState({ images: this.state.images });
};
render() {
return (
<div className="gallery-root">
{this.state.images.map((dto, index) => {
return <Image key={'image-' + index} dto={dto} galleryWidth=
{this.state.galleryWidth}
handleClone={image => this.handleClone(image)}
/>;
})}
</div>
);
}
my Image.js:
handleClone() {
this.props.handleClone(this.props.dto); // send to the Gallery component
the image to clone.
}
render() {
return (
<div>
<FontAwesome className="image-icon" name="clone" title="clone"
onClick={()=> this.handleClone()}/>
<FontAwesome className="image-icon" name="filter" title="filter"
onClick={()=> this.filterChange()}/>
<FontAwesome className="image-icon" name="expand" title="expand" />
</div>
</div>
);
}
Thanks :)
For the clone purposes.
handleClone = image => {
const imagesCopy = [...this.state.images]; //creates a copy of the images array which is stored in your component.
imagesCopy.push(image);
//this.state.images.push(image); this way will mutate the state directly which is a mistake.
this.setState({ images: imagesCopy });
};
About the react-modal thing, I don't see anything related to that in the question post, can you please share out the related code?

JSX get Component by string

This is pretty complicated to explain.
I am getting a couple of Icons from a component library as follows:
import { Icons } frommy-component-library';`
Let say I've got 3 Icons in there called IconPlus, IconMinus and IconEquals.
I can easily display the IconEquals along with a description prop as follows:
const IconContainer = ({ description ) => (
<div>
{description}
<Icons.IconEquals />
</div>
)
This works nicely. Now I'm trying to implement a template where I could pass another prop icon to this container which would display the corresponding icon.
Eg. if icon is IconPlus
Then it should render the following:
<div>
{description}
<Icons.IconEquals />
</div>
How do I implement my JSX to do that?
This is basically what I've got:
import { Icons } from 'my-component-library'
const IconContainer = ({ description, icon }) => (
<div>
{description}
<Icons.{icon} /> // <---- Obviously that doesn't work
// ^^^^ But I need something like this
</div>
);
Is it possible to do this?
You can use like this :
<Icons[icon] />

Categories