I am currently working on the final project of a coding Bootcamp and there's just one thing that I can't seem to figure out(not sure if it is possible though).
I have a list of activities, where I map every activity into a card (which works fine). Now I would like to put these cards into the React Bootstrap Carousel and show 4 cards at a time. When I press one of the indicator it should slide to the next (or previous) card (not the next 4 cards). The only thing that I can get to work is having 1 card in the carousel.
Hoping that there is someone out there who is able to help me out.
Thank you from a nonDeveloper to a soon to become noobDeveloper.
Here's my code:
import React, { useState, useEffect } from "react";
import "./Cardslider.css";
import Explorecard from "./Explorecard/Explorecard";
import axios from "axios";
import Carousel from "react-bootstrap/Carousel";
function createCard(area) {
return (
<Carousel.Item>
<div>
<Explorecard image={`images/${area.area}.jpg`} title={area.area} />
</div>
</Carousel.Item>
);
}
const Cardslider = (props) => {
const [listOfActivities, setListOfActivities] = useState([]);
const getAllActivities = () => {
axios
.get("http://localhost:9999/activities")
.then((responseFromApi) => {
console.log(responseFromApi);
setListOfActivities(responseFromApi.data);
})
.catch((error) => console.error(error));
};
useEffect(getAllActivities, []);
return (
<div className="cards-container">
<Carousel className="explore-card-carousel" indicators={false}>
{listOfActivities.map(createCard)}
</Carousel>
</div>
);
};
export default Cardslider;
Before using the Carousel.Item tag, you must use the Carousel tag.
Related
before I'll explain my problem I want to mention that the following snippet may not make sense however it should suffice to explain my problem.
I'm building a simple todo list and using useContext in conjunction with useReducer hooks.
within the following component, I'm generating the todo items with a button that will remove the designated item.
I've tried to add an onClick event that will dispatch a reducer event directly inside the Image component.
this implementation introduced an infinite loop however if I'm following the implementation described in the code below, my code works perfectly fine.
can someone shed light on what's going on? shouldn't the function create an infinite loop as well?
import type { NextPage } from 'next';
import Image from 'next/image';
import { useContext } from 'react';
import ListContext from '../context/list-context';
import Check from '../public/icon-check.svg';
import Cross from '../public/icon-cross.svg';
const ListItems : NextPage = () => {
const {state, dispatch} = useContext(ListContext);
const testingFunc = () => {
console.log("sssssss");
dispatch({type: 'removingElement', payload : 'Google'});
}
return (
<ul>
{state.map(item => <li className='border-b'>
<button onClick={testingFunc} className='bg-black border-2 border-red-900 p-6 rounded-full'>
<Image src={Check} />
</button>
{item.name} <button className='border-2 border-red-900 p-2 rounded-full'>
<Image src={Cross} />
</button>
</li>)}
</ul>
)
}
export default ListItems;
Context:
I want to add an AOS-effect to multiple divs filled with data from a server, which are rendered after the initial render:
import {useEffect, useState} from "react";
export const Test = () => {
const [data, setData] = useState([]);
async function fetchData() {
//Example fetch request
const response = await fetch(API, {method:"GET"});
const json = await response.json();
setData(json);
}
useEffect(() => {fetchData();}, []);
return (
<>
{
data.map((text, index) => {
//add aos effect to each div
<div key={index}>
{text}
</div>
});
}
</>
)
}
<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>
What I've tried:
I tried to import AOS and add it as in this question:
<div key={index} data-aos="fadeIn"></div>
This had no effect at all.
I also looked at react-animate-on-scroll, but it is not compatible with react v. 18.1.0:
Question:
How can I get animate on scroll (AOS) to work on fetched data in react?
I found the error. I had to import the aos css files as well:
import AOS from "aos";
import "aos/dist/aos.css";
Did you initialize AOS in the first place?
<script>
AOS.init();
</script>
You might need to refresh AOS due to reacts rendering nature, which renders new html elements on each component update.
AOS.refresh();
I would try giving a class which animates or using Intersection Observer
Having trouble using Create React App to change a background image I feed to my component through props. The docs say use the import syntax. This works but it would mean I have to hard code every background image to each component. Anyway to do this dynamically?
I noticed it won't let me use template literals on the import syntax as well. That would have fixed my issue I think.
import '../css/Avatar.css';
import photo from "../images/joe_exotic.jpg";
const Avatar = (props) => {
return (
<div
style={{backgroundImage: `url("${photo}")`}}
className="avatar">
</div>
)
}
export default Avatar;
P.S: I checked out the other articles on StackOverflow regarding this and they didn't provide much help.
If you wanna avoid this way of doing, you can put your images in the public folder of your React app, et grab them like so :
import '../css/Avatar.css';
const Avatar = (props) => {
return (
<div
style={{backgroundImage: `url("/joe_exotic.jpg")`}}
className="avatar">
</div>
)
}
export default Avatar;
I hope it works for you. good luck.
import '../css/Avatar.css';
import photo from "../images/joe_exotic.jpg";
const Avatar = (props) => {
return (
<div
style={{backgroundImage:url(photo)}}
className="avatar">
</div>
) }
export default Avatar;
I am new to react and there is this challenge that i am having,
I have slider created a component
import React from 'react'
import NextEvent from '../nextEvent/NextEvent'
import './slider.css';
function Slider(props) {
const {id, image, sub_title, title} = props;
return (
<main id='slider'>
<div className="slide" key= {id}>
<div className="slide-image">
<img src={image} alt="slider-background"/>
</div>
<h1>{title} </h1>
<h5>...{sub_title}</h5>
</div>
<div className="event-countdown">
<NextEvent/>
</div>
</main>
)
}
export default Slider
I need to have this banner component on almost all my pages, and on each of the pages, it comes with a
different information (image, title, subtitle)
the backend guy sent the api and i consumed, but the problem is that, if i consume the api on the
component directly, all the pages will have the same info on the banner component which is not what i want,
also consuming the API on the homepage seemed like it was not the right thing to do, so i created another component which
collects the Api and i then added that new component to my homepage.
now my question goes:
did i do the correct thing ?
if correct, does it mean i have to create new corresponding components that will receive the APi for
each page i want to display the banner just like i did for the homepage?
will i have to as the backend guy to create different apis for each of the pages in which the
component is to be displayed
if no please help me with an efficient way which i can inject data coming from the backend into a
component which will be displayed on different pages with different data
this is the new component i created for the APi consumption
import React, {useState, useEffect } from 'react'
import NextEvent from '../../components/nextEvent/NextEvent'
import axios from "axios";
import '../../components/slider/slider.css';
const sliderUrl = "*************************************"
function HomeSlider(props) {
const [sliderData, setSliderData] = useState([]);
const { image, sub_title, title} = props;
const getSliderContents = async () => {
const response = await axios.get(sliderUrl);
const content = response.data;
setSliderData(content);
}
useEffect(() => {
getSliderContents();
}, [])
// console.log("slider", sliderData)
if(sliderData) {
return (
<main id='slider'>
{sliderData.map((item) => {
return (
<div className="slide" key= {item.id}>
<div className="slide-image">
<img src={item.image} alt="slider-background"/>
</div>
<h1>{item.title} </h1>
<h5>...{item.sub_title}</h5>
</div>
)
})}
<div className="event-countdown">
<NextEvent/>
</div>
</main>
)
}
}
export default HomeSlider
this is the Homepage i displayed it
function HomePage() {
return (
<div>
<NavBar/>
<SecondaryMenu/>
<HomeSlider />
<FeaturedBox />
Please any help is appreciated, i have search all over but no one explains how to display
component with different data on different pages
So i just wanted to get back on this, i figured i have to setup a service point where i call the api and then consume the endpoints on each page as desired
Im trying to find a solution to what Ive been experiencing with image based galleries (in example lightbox or FancyBox). This error came up after following this doc and using this code as an
example.
I have tried using react-images to no avail, the modal doesn't display right, so I tried the links react-photo-gallery and I am encountering this error. Ive tried converting it to a component, and it didn't agree with the App function in the top portion of the file. I also tried creating a html file in my pages directory and added the import link to the illustrationGallery file, but that didn't seem to work.
My illustrationGallery file
import React, { useState, useCallback } from "react";
import { render } from "react-dom";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";
import { illustrations } from "../components/illustrations";
import Artwork from '../pages/gallery';
function App() {
const [currentImage, setCurrentImage] = useState(0);
const [viewerIsOpen, setViewerIsOpen] = useState(false);
const openLightbox = useCallback((event, { photo, index }) => {
setCurrentImage(index);
setViewerIsOpen(true);
}, []);
const closeLightbox = () => {
setCurrentImage(0);
setViewerIsOpen(false);
};
return (
<div>
<Gallery illustrations={illustrations} onClick={openLightbox} />
<ModalGateway>
{viewerIsOpen ? (
<Modal onClose={closeLightbox}>
<Carousel
currentIndex={currentImage}
views={illustrations.map(x => ({
...x,
srcset: x.srcSet,
caption: x.title
}))}
/>
</Modal>
) : null}
</ModalGateway>
</div>
);
}
render(<App />, document.getElementById("illuGallery"));
Local host window error
invariant
node_modules/react-dom/cjs/react-dom.development.js:56
render
node_modules/react-dom/cjs/react-dom.development.js:21195
▲ 2 stack frames were expanded.
Module.<anonymous>
src/components/illustrationGallery.js:43
40 | </div>
41 | );
42 | }
> 43 | render(<App />, document.getElementById("illuGallery"));
44 |
This error description is towards the top, but there are more
Just trying to achieve something that displays a proper image gallery using react, would it be easier to just make it using another doc or from scratch? Does anyone have any recommendations or answers to help?
This happens because:
document.getElementById("illuGallery") can not find an element with id #illuGaller.
if you are willing to make it work, and this is the only component you actually want react to render.
as from the example of the codesandbox project.
You go to your template, where react renders the ellement. basically index.html or template.html, in the example it's index.html
And make sure that the root element there which where react will inject your JSX, make sure it has the id illuGallery