I am new to React and following a React tutorial. I am confused about how to have my Accordion component be directed to the path without utilizing the data file I created while following the tutorial. In general, I want the user to click “FAQ” in the navbar and be sent to the Accordion component.
Thank you for helping me further my knowledge in React!!
Navbar:
import React, {useState, useEffect} from 'react';
import { NavLink } from 'react-router-dom';
import { FaBars } from "react-icons/fa";
import {Nav, ExternalButton, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks, NavBtnLink, NavBtn } from './NavbarElements';
import { IconContext } from 'react-icons/lib';
import Accordion from '../Accordion/Accordion';
import { animateScroll as scroll } from 'react-scroll';
const Navbar = ({toggle}) => {
const [scrollNav, setScrollNav] = useState(false)
const changeNav = ()=>{
if(window.scrollY >= 80)
{
setScrollNav(true)
}
else
{
setScrollNav(false)
}
}
useEffect(()=> {
window.addEventListener('scroll', changeNav)
}, []);
const toggleHome = () => {
scroll.scrollToTop();
}
return (
<>
<IconContext.Provider value={{color: '#fff'}}>
<Nav scrollNav={scrollNav}>
<NavbarContainer>
<NavLogo to='/' onClick={toggleHome}>Verticality</NavLogo>
<MobileIcon onClick={toggle}>
<FaBars />
</MobileIcon>
<NavMenu>
<NavItem>
<NavLinks to="about"
smooth={true} duration={500} spy={true} exact='true' offset={-80}
>About</NavLinks>
</NavItem>
<NavItem>
<NavLinks to="start"
smooth={true} duration={500} spy={true} exact='true' offset={-80}
>Get Started</NavLinks>
</NavItem>
<NavItem>
<NavLinks to='faq'
smooth={true} duration={500} spy={true} exact='true' offset={-80}
>FAQ</NavLinks>
</NavItem>
<NavItem>
<NavLinks to="nft"
smooth={true} duration={500} spy={true} exact='true' offset={-80}>NFTs</NavLinks>
</NavItem>
</NavMenu>
<NavBtn>
<ExternalButton href="google.com" target="_blank" rel="noopener"> Purchase</ExternalButton>
</NavBtn>
</NavbarContainer>
</Nav>
</IconContext.Provider>
</>
);
};
export default Navbar
Data.js
import Accordion from '../Accordion/Accordion';
export const homeObjOne = {
id: 'about',
lightBg: false,
lightText: true,
lightTextDesc: true,
// topLine: 'A Crypto which is here to stay',
headline: 'Buy Now or Regret Later',
description: 'Text ',
buttonLabel: 'Purchase',
imgStart: true,
img: require('../../images/svg1.svg').default,
alt: 'Car',
dark: true,
primary: true,
darkText: false
};
export const homeObjTwo = {
id: 'start',
lightBg: true,
lightText: false,
lightTextDesc: false,
topLine: 'So, how do we get started?',
description:
`text `,
buttonLabel: <td onClick={() => window.open("https://docs.pancakeswap.finance/get-started", "_blank")}>Learn More</td>,
imgStart: true,
img: require('../../images/svg2.svg').default,
alt: 'checking off list ',
dark: false,
primary: false,
darkText: true
};
export const homeObjThree = {
id: 'nft',
lightBg: false,
lightText: true,
lightTextDesc: true,
topLine: 'NFTs are here to stay...',
headline: 'AND SO ARE WE!',
description: 'text ',
imgStart: true,
img: require('../../images/svg3.svg').default,
alt: 'Construction',
dark: true,
primary: false,
darkText: false
};
App.js
import React from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import './App.css';
import Accordion from './components/Accordion/Accordion';
import DisclaimerPage from './components/FooterPages';
import { homeObjTwo } from './components/InfoSection/Data';
import Home from './pages';
import aboutUs from './pages/aboutUs';
import disclaimer from './pages/disclaimer';
function App() {
return (
<Router>
<Switch>
<Route path='/' component={Home} exact />
<Route path='/aboutUs' component={aboutUs} exact />
<Route path='/disclaimer' component={disclaimer} exact />
<Route path='/faq' component={Accordion} exact /> //does not work
</Switch>
</Router>
);
}
export default App;
I don’t how much help this will be but here is the Accordion.js
import React,{useState} from 'react';
import {Data} from './Data';
import styled from 'styled-components';
import { IconContext } from 'react-icons';
import { FiPlus, FiMinus} from 'react-icons/fi'
import { AccordionSection, Container, Wrap, Dropdown} from './AccordionElements';
const Accordion = () => {
const [clicked, setClicked] = useState(false)
const toggle = index => {
if(clicked == index)
{
return setClicked(null)
}
setClicked(index)
}
return (
<IconContext.Provider value={{color : '#00FFB9', size: '25px'}}>
<AccordionSection>
<Container>
{Data.map((item, index) => {
return (
<>
<Wrap onClick={()=> toggle(index)} key={index}>
<h1>{item.question}</h1>
<span>{clicked === index ? <FiMinus /> : <FiPlus />}</span>
</Wrap>
{clicked === index ? (
<Dropdown>
<p>{item.answer}</p>
</Dropdown>
) : null}
</>
)
})}
</Container>
</AccordionSection>
</IconContext.Provider>
)
}
export default Accordion
