Problem incorporating elements of a React app into another React App

JavaScript
1

I have a working navigation bar and a separate image slider in two separate React apps. I am having problems incorporating the image slider into the navigation bar app. What I want is for the images to appear when the black and white tab is clicked and then after the Bix icon is clicked the user goes back to the homepage with the navigation bar. That navigation structure already works in the ReactNavbar, I just cannot get the images to show up. Because there are multiple files involved these are links to Github repositories.

This is the page I am trying to add to, BlackWhite.js in the pages folder in ReactNavbar app.

import { useNavigate } from 'react-router';
import { BiX } from 'react-icons/bi';
import { useLayoutEffect } from 'react';
export default function BlackWhite({ setShowNavbar }) {
  const rightAlign = {
    textAlign: 'right',
  };

  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/');
  };

  // Receive setShowNavbar as props and set it to false
  useLayoutEffect(() => {
    setShowNavbar(false);
  }, []);

  return (
    <div style={rightAlign} className="BlackWhite">
      <h1>Black and white</h1>
      {/* <button onClick={handleClick}>Back to homepage</button> */}
      <BiX className="icon" onClick={handleClick} />
    </div>
  );
}

This was my attempt to incorporate the other app. I added elements from ImageSlider.js in ReactSlider app. It results in a blank page when you click on the Black and White element:

import { useNavigate } from 'react-router';
import { BiX } from 'react-icons/bi';
import { useLayoutEffect } from 'react';
import React, { useState } from 'react';
import { SliderData } from './SliderData';
import { BiChevronLeft, BiChevronRight } from 'react-icons/bi';

export default function BlackWhite({ setShowNavbar }) {
  const rightAlign = {
    textAlign: 'right',
  };

  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/');
  };

  // Receive setShowNavbar as props and set it to false
  useLayoutEffect(() => {
    setShowNavbar(false);
  }, []);

  const ImageSlider = ({ slides }) => {
    const [current, setCurrent] = useState(0);
    const length = slides.length;

    const nextSlide = () => {
      setCurrent(current === length - 1 ? 0 : current + 1);
    };

    const prevSlide = () => {
      setCurrent(current === 0 ? length - 1 : current - 1);
    };

    if (!Array.isArray(slides) || slides.length <= 0) {
      return null;
    }
  };
  return (
    <>
      <div style={rightAlign} className="BlackWhite">
        <h1>Black and white</h1>
        {/* <button onClick={handleClick}>Back to homepage</button> */}
        <BiX className="icon" onClick={handleClick} />
      </div>
      <section className="slider">
        <BiChevronLeft className="left-arrow" onClick={prevSlide} />
        <BiChevronRight className="right-arrow" onClick={nextSlide} />
        {SliderData.map((slide, index) => {
          return (
            <div
              className={index === current ? 'slide active' : 'slide'}
              key={index}
            >
              {index === current && (
                <img src={slide.image} alt="travel image" className="image" />
              )}
            </div>
          );
        })}
      </section>
    </>
  );
}

This is the directory structure of the new combined app.

+---public
|   |   favicon.ico
|   |   index.html
|   |   manifest.json
|   |   robots.txt
|   |   
|   \---images1
|           a.jpg
|           b.jpg
|           c.jpg
|           d.jpg
|           
\---src
    |   App.js
    |   index.js
    |   Navbar.js
    |   styles.css
    |   
    +---components
    |   |   NavBar.js
    |   |   
    |   +---Navbar
    |   |       index.js
    |   |       NavbarElements.js
    |   |       
    |   \---Slider
    +---images1
    |       a.jpg
    |       b.jpg
    |       c.jpg
    |       d.jpg
    |       
    \---pages
            BlackWhite.js
            Color.js
            Home.js
            ImageSlider.js
            SliderData.js
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.