Hello,
I have a portfolio website I am working on here: Personal Portfolio.
In the about me section, there are embedded tabs to show information about different hobbies. Next to it, there is an image carousel. I’d like the images to change when the user selects different hobby tabs.
The active tab (in HobbyTabs.js) is stored in a state variable and passed up to the parent (about-me.js) and down to the sibling (ImageCarousel.js). The variable changes as expected in a heading above the component. Yet, that component does not register a change in that state correctly when used in the ‘activeIndex=’ property.
Any suggestions as to why this issue is occurring, how to fix it, or a better way to achieve the same thing are welcomed!
Here are the three blocks of code referenced.
about-me.js
import { Row, Col, Image, Container} from "react-bootstrap";
import { ImageCarousel } from "../components/ImageCarousel"
import { HobbyTabs } from "../components/HobbyTabs"
import { useState, useEffect, createContext } from "react";
export const Context = createContext()
export default function AboutMe() {
const [key, setKey] = useState(0)
useEffect(() => console.log(key))
return (
<main style={{ padding: "1rem 0"}} >
<Container>
<Row>
<Col className="text-center">
<h2>Who is Elliot Erickson, really?</h2>
</Col>
</Row>
<Row className="align-items-center">
<Col md={4}>
<p className="lead font-weight-bold">
Mūsa, mihī causās memorā, quō nūmine laesō
</p>
<p className="lead font-weight-bold">Quidve dolēns, rēgīna deum tot volvere cāsūs īnsīgnem pietāte virum, tot adīre labōrēs impulerit.</p>
<p className="lead font-weight-bold">Tantaene animīs caelestibus īrae? Urbs antīqua fuit, Tyriī tenuēre colōnī. </p>
</Col>
<Col md={8}>
<Image src={require("../images/about-me-profile.PNG")} className="img-fluid d-none d-sm-block" alt="Portfolio Preview" />
</Col>
</Row>
<Row>
<Context.Provider value={{key, updateKey: key => setKey(key)}}>
<HobbyTabs />
<ImageCarousel />
</Context.Provider>
</Row>
</Container>
</main>
);
}
HobbyTabs.js
import { Col, Tabs, Tab } from "react-bootstrap";
import { useContext } from "react";
import { Context } from "../routes/about-me"
export const HobbyTabs = () => {
const {key, updateKey } = useContext(Context)
return (
<Col className="mt-5" md={6}>
<h2 className="text-center">Hobbies and Interests</h2>
<Tabs
activeKey={key}
transition={false}
onSelect={(k) =>
updateKey(k)
}
id="hobby-tabs-no-animation"
className="mb-3"
>
<Tab
eventKey={0}
title="Hobby One"
>
<p className="lead">
Hīs accēnsa super iactātōs aequore tōtō Trōas, rēliquiās Danaum atque immītis Achillī, arcēbat longē Latiō, multōsque per annōs errābant, āctī Fātīs, maria omnia circum.Tantae mōlis erat Rōmānam condere gentem!
</p>
</Tab>
<Tab
eventKey={1}
title="Hobby Two"
>
<p className="lead">
Aeolus haec contra: 'Tuus, O regina, quid optes explorare labor; mihi iussa capessere fas est. Tu mihi, quodcumque hoc regni, tu sceptra Iovemque concilias, tu das epulis accumbere divom, nimborumque facis tempestatumque potentem.'
</p>
</Tab>
<Tab
eventKey={2}
title="Hobby Three"
>
<p className="lead">
Haec ubi dicta, cavum conversa cuspide montem impulit in latus: ac venti, velut agmine facto, qua data porta, ruunt et terras turbine perflant. Incubuere mari, totumque a sedibus imisna Eurusque Notusque ruunt creberque procellis Africus, et vastos volvunt ad litora fluctus.
</p>
</Tab>
</Tabs>
</Col>
);
};
ImageCarousel.js
import { Carousel, Col } from 'react-bootstrap';
import { Context } from "../routes/about-me"
import { useContext, useState} from "react";
export const ImageCarousel = () => {
const { key } = useContext(Context);
return (
<Col>
<h2>the key is {key}</h2>
<Carousel
variant="dark"
interval={null}
controls={false}
indicators={false}
activeIndex={key}
>
<Carousel.Item >
<img
className="d-block w-100"
src={require("../images/hobby-image.PNG")}
alt="First slide"
/>
<Carousel.Caption>
<h3 className="text-success">First slide label</h3>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item >
<img
className="d-block w-100"
src={require("../images/hobby-image.PNG")}
alt="Second slide"
/>
<Carousel.Caption>
<h3 className="text-success">Second slide label</h3>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item >
<img
className="d-block w-100"
src={require("../images/hobby-image.PNG")}
alt="Third slide"
/>
<Carousel.Caption>
<h3 className="text-success">Third slide label</h3>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
</Col>
)
}
Thank you!!