I want to make a reusable modal component with transitions, but CSSTransition doesn't work, i have been trying for many ways but nothing works. Maybe is createPortal, or useContext.
I am interested in creating a single modal component for several pages, and only place the transition once so that it is reusable
Route
const App = () => {
const initialState = useInicialState();
return (
<AppContext.Provider value={initialState}>
<AdminProvider>
<Routes>
<Route exact path="/" element={<Login />} />
<Route element={<Layout />}>
<Route exact path="/dashboard" element={<Dashboard />} />
<Route exact path="/areas" element={<Areas />} />
<Route path="*" element={<NotFound/>} />
</Route>
</Routes>
</AdminProvider>
</AppContext.Provider>
);
};
export default App;
Hook:
const useInicialState= ()=>{
const [openModal, setOpenModal] = useState(false);
return{
openModal,
setOpenModal
}
}
export default useInicialState;
Context:
import React from "react";
const AppContext = React.createContext({});
export default AppContext;
Modal Component:
const Modal = ({children}) => {
const {openModal, setOpenModal}= useContext(AppContext)
const nodeRef = useRef(null);
console.log(openModal)
const handleClose = ()=>{
setOpenModal(false)
}
return (
ReactDOM.createPortal(
<div className="modal-background">
<CSSTransition
in={openModal}
timeout={500}
classNames="modal"
unmountOnExit
nodeRef={nodeRef}
>
<div className="modal" ref={nodeRef}>
<button onClick={handleClose} className="button-close">
x
</button>
{children}
</div>
</CSSTransition>
</div>,
document.getElementById('modal')
)
);
}
export default Modal
Page:
const Areas = () => {
const [token] = useContext(AdminContext);
const {openModal, setOpenModal} = useContext(AppContext);
const [sectors, setSectors] = useState([]);
const getSectors = async ()=>{
const requestOptions = {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
};
const response = await fetch("/api/sector/list", requestOptions);
if(!response.ok){
}else{
const data = await response.json();
setSectors(data);
}
};
useEffect(() => {
getSectors();
}, [])
const handleModal= ()=>{
setOpenModal(!openModal)
}
return (
<>
{openModal && (
<Modal>
<p>esto es una prueba</p>
</Modal>
)}
<button className="button-create" onClick={handleModal}>Crear área</button>
<table className="styled-table">
<thead>
<tr>
<th>Nombre</th>
<th>Descripción</th>
<th>Modificar/borrar</th>
<th>Administrar personal</th>
<th>Administrar aspectos</th>
</tr>
</thead>
<tbody>
{sectors.map((sector)=>(
<tr key={sector.sector_name}>
<td>{sector.sector_name}</td>
<td>{sector.sector_description}</td>
<td>
<img src={edit} alt="" />
<img src={garbage} alt="" />
</td>
<td>
<img src={personal} alt="" />
</td>
<td>
<img src={drop} alt="" />
</td>
</tr>
))}
</tbody>
</table>
</>
)
}
export default Areas;
and last Css:
.modal-background{
display:block;
position: fixed;
z-index: 1;
padding-top:100px;
left: 0;
top: 0;
width:100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba($color: #000000, $alpha: 0.5);
}
.button-close{
position: absolute;
left:200px;
}
.modal{
position:relative;
background-color:white;
margin:auto;
margin-left:267px;
padding:0;
border:none;
border-radius:10px;
}
.modal-enter{
opacity:0;
transform:scale(0);
}
.modal-enter-active{
opacity:1;
transform: scale(1);
transition: opacity 500ms, transform 500ms;
}
.modal-exit{
opacity: 1;
}
.modal-exit-active{
opacity:0;
transform: scale(0);
transition: opacity 500ms, transform 500ms;
}
Find myself the solution, thge problem was by the conditional for CSStransition.
{openModal && (
<Modal>
<p>esto es una prueba</p>
</Modal>
)}
with out this condition work fine:
<Modal>
<p>esto es una prueba</p>
</Modal>
Related
As of right now my searchbar wont minimize, I don't really know how to write a code so if it's empty it doesn't display anything. Also I would like to be able to click somewhere else on the screen to make it dissapear. Anyone got any ideas? :)
GIF of problem: https://gyazo.com/518e8a14216b527c003aab7fc32f343c
My input:
<input
className="form-control"
placeholder="Search CARLDb..."
value={props.value}
onChange={(event) => props.setSearchValue(event.target.value)}>
</input>
My search list: https://gyazo.com/a7c5b2f2ada0379f2d5b0cee717d7d07
import React from "react";
import { Link } from "react-router-dom";
import "./components.css";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faStar } from "#fortawesome/free-solid-svg-icons";
import placeholder from './Images/placeholder.jpg'
const image_url = "https://image.tmdb.org/t/p/w500";
const SearchList = (props) => {
return (
<>
{props.tvShow?.map((movie) => (
<div key={movie.id} className="search-box">
<img
className="search-image"
src={movie.poster_path === null ? placeholder : image_url + movie.poster_path}
alt={movie.poster_path}
/>
<span className="search-span">
<FontAwesomeIcon id="search-star" icon={faStar} />
{movie.vote_average}
</span>
<a className="search-link" href={`https://www.themoviedb.org/movie/${movie.id}`} target="_blank" rel="nooponer noreferrer">
<p className="searchp" onClick={()=> props.handleFavouritesClick(movie)}>{movie.title || movie.name}</p>
</a>
</div>
))}
</>
);
};
export default SearchList;
CSS:
.search-list { /*built with container fluid*/
position: absolute;
left: 38%;
width: 350px;
display: inline;
z-index: 99;
max-height: 40%;
max-width: 550px;
}
.search-box {
background-color: #1a1a1a;
height: 75px;
max-width: 505px;
display: flex;
border: 1px solid black;
overflow: hidden;
}
Please let me know if I should there is any other code you would like to see. I'm a beginner to React and JavaScript.
Thanks! :)
edit: refered to searchbar instead of my results. I would like to keep the searchbar at all times but I want my resultbox to dissapear.
edit2: added navbar.js and app.js
Navbar.js
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import logo from "../carldb2.png";
import "bootstrap/dist/css/bootstrap.min.css";
import "./components.css";
import SearchBox from "./SearchBox";
import SearchList from "./SearchList";
const Navbar = (props) => {
const getSearchRequest = async () => {
const search_url = `https://api.themoviedb.org/3/search/movie?api_key=1e08baad3bc3eca3efdd54a0c80111b9&language=en-US&query=${props.searchValue}&page=1&include_adult=false`;
const response = await fetch(search_url);
const responseJson = await response.json();
if (responseJson.results) {
props.setMovieSearch(responseJson.results.slice(0, 7));
}
};
useEffect(() => {
if (props.searchValue) {
getSearchRequest();
}
}, [props.searchValue]);
return (
<div>
<nav className="navbar">
<div className="nav-center d-flex">
<Link to="/">
<img className="logo" src={logo} alt="logo" />
</Link>
<SearchBox
searchValue={props.searchValue}
setSearchValue={props.setSearchValue}
/>
</div>
</nav>
<div className="container-fluid search-list">
<SearchList
tvShow={props.movieSearch}
handleFavouritesClick={props.addRecentlyViewed}
/>
<Link to="/search">
<button className="results" onClick={closeFunction()}>
<h7 className="results-text">See all results for "{props.searchValue}"</h7>
</button>
</Link>
</div>
</div>
);
};
export default Navbar;
app.js
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Homepage from "./components/Homepage";
import Footer from "./components/Footer";
import Navbar from "./components/Navbar";
import React, { useEffect } from "react";
import SearchPage from "./components/SearchPage";
function App() {
const [searchValue, setSearchValue] = React.useState("");
const [movieSearch, setMovieSearch] = React.useState([]);
const [tvShow, setTVShow] = React.useState([]);
const [recentlyViewed, setRecentlyViewed] = React.useState([]);
useEffect(() => {
const recentlyMovies = [
...new Set(
JSON.parse(localStorage.getItem("recently-watched"))
),
];
if (recentlyMovies) {
setRecentlyViewed([...new Set(recentlyMovies.slice(0, 5))]);
}
}, []);
const saveToLocalStorage = (items) => {
localStorage.setItem("recently-watched", JSON.stringify(items));
};
const addRecentlyViewed = (movie) => {
recentlyViewed.forEach((item) => {
let index = recentlyViewed.indexOf(item);
if (item.id === movie.id) {
recentlyViewed.splice(index, 1);
}
});
const newRecentlyViewed = [movie, ...recentlyViewed];
setRecentlyViewed([...new Set(newRecentlyViewed)].slice(0, 5));
saveToLocalStorage(newRecentlyViewed);
};
return (
<Router>
<Navbar
searchValue={searchValue}
setSearchValue={setSearchValue}
addRecentlyViewed={addRecentlyViewed}
movieSearch={movieSearch}
setMovieSearch={setMovieSearch}
/>
<Routes>
<Route
path="/"
element={
<Homepage
tvShow={tvShow}
setTVShow={setTVShow}
addRecentlyViewed={addRecentlyViewed}
recentlyViewed={recentlyViewed}
setRecentlyViewed={setRecentlyViewed}
/>
}
/>
<Route
path="/search"
element={
<SearchPage
handleFavouritesClick={addRecentlyViewed}
tvShow={movieSearch}
setTVShow={setTVShow}
searchValue={searchValue}
setSearchValue={setSearchValue}
addRecentlyViewed={addRecentlyViewed}
/>
}
/>
</Routes>
<Footer />
</Router>
);
}
export default App;
In the Navbar component you could add some flag to show / hide the SearchList
const showList = props.searchValue !== "";
{
showList ? (
<div className="container-fluid search-list">
<SearchList
tvShow={props.movieSearch}
handleFavouritesClick={props.addRecentlyViewed}
/>
<Link to="/search">
<button className="results" onClick={closeFunction()}>
<h7 className="results-text">
See all results for "{props.searchValue}"
</h7>
</button>
</Link>
</div>
) : null;
}
I'm attempting to use useState to alter the display type in my styled components. When attempting to use my code the display type is not altered and my variable "displayType" is undefined.
I've attempted altering what my setStyle() function returns, but I am starting to see this is a larger problem that I'd like to understand better.
When I print the value to the console in index.js everything works fine. However I just get undefined when I try to use displayType in StoreElements.js
src/pages/store.js
const [displayType, setDisplayType] = useState("none");
const setStyle = (displayType) => {
setDisplayType(displayType);
console.log(displayType)
};
const [isOpen, setIsOpen] = useState(false)
const toggle = () => {
setIsOpen(!isOpen)
}
return (
<div>
<Sidebar isOpen={isOpen} toggle={toggle} />
<Navbar toggle={toggle} />
<Store setStyle={setStyle} displayType={displayType}></Store>
<Footer />
</div>
)
}
export default StorePage
src/store/index.js
const Store = ({displayType, setStyle}) => {
return (
<>
<AboutBg style={{ backgroundImage: `url(${BgPic})` }}></AboutBg>
<StoreContainer>
<StoreWrapper>
<Title>Store</Title>
<ItemsContainer>
<ItemWrapper
onMouseEnter={() => setStyle("hoodie")}
onMouseLeave={() => setStyle("none")}
>
<ImgWrapper>
<ImgLink to="/about">
<MerchImg src={frontHoodie}></MerchImg>
</ImgLink>
</ImgWrapper>
<TextWrapper>
<MerchText>Hoodie text</MerchText>
<HoodiePriceText>price</HoodiePriceText>
</TextWrapper>
</ItemWrapper>
<ItemWrapper
onMouseEnter={() => setStyle("sweats")}
onMouseLeave={() => setStyle("none")}
>
<ImgWrapper>
<ImgLink to="/tournaments">
<MerchImg src={frontSweats}></MerchImg>
</ImgLink>
</ImgWrapper>
<TextWrapper>
<MerchText>Sweats text</MerchText>
<SweatsPriceText displayType={displayType}>
price
</SweatsPriceText>
</TextWrapper>
</ItemWrapper>
<ItemWrapper
onMouseEnter={() => setStyle("shirt")}
onMouseLeave={() => setStyle("none")}
>
<ImgWrapper>
<ImgLink to="/">
<MerchImg src={frontShirt}></MerchImg>
</ImgLink>
</ImgWrapper>
<TextWrapper>
<MerchText>Shirt text</MerchText>
<ShirtPriceText>price</ShirtPriceText>
</TextWrapper>
</ItemWrapper>
<ItemWrapper
onMouseEnter={() => setStyle("mousepad")}
onMouseLeave={() => setStyle("none")}
>
<ImgWrapper>
<ImgLink to="/">
<MerchImg src={mousepadFront}></MerchImg>
</ImgLink>
</ImgWrapper>
<TextWrapper>
<MerchText>mouspad text</MerchText>
<MousepadPriceText>price</MousepadPriceText>
</TextWrapper>
</ItemWrapper>
</ItemsContainer>
</StoreWrapper>
</StoreContainer>
<div>
{listItems}
{cartItems}
Total: ${cartTotal}
{cartItems.length}
</div>
</>
);
};
export default Store;
src/store/StoreElements.js
export const HoodiePriceText = styled.h4`
color: red;
position: absolute;
top: 365px;
transition: 0.8s all ease;
display: ${({ displayType }) => {
if (displayType === "hoodie") {
console.log("working");
return "block";
} else {
console.log({displayType})
return "none";
}
}};
`;
export const ShirtPriceText = styled.h4`
color: red;
position: absolute;
top: 365px;
transition: 0.8s all ease;
`;
export const MousepadPriceText = styled.h4`
color: red;
position: absolute;
top: 365px;
transition: 0.8s all ease;
`;
export const SweatsPriceText = styled.h4`
color: red;
position: absolute;
top: 365px;
transition: 0.8s all ease;
`;
In your styled component usage, you should bind the property displayType:
<HoodiePriceText displayType={displayType}>price</HoodiePriceText>
Thus, you should able get displayType in styled component!
setDisplayType is triggering the state change and causes a re-render of the function. It does not modify the value of the variable displayType. The value displayType is still undefined directly after calling setDisplayType, because it only gets its value after the function re-runs the useState-line.
const [displayType, setDisplayType] = useState("none");
// displayType can only get a new value here
I am trying to fetch coingecko-api to access live price of bitcoin. I am trying to pass return props of getServerSideProps to my <CalculatorBuy /> component which is the part of <Main /> component. I was trying to import async function in calculatorbuy.js but i'm getting undefined object. How to pass props from index.js to main.js and calculatorbuy.js components. In index.js everything work like a charm but i would like to use props value directly in components.
index.js
export default function Home(props) {
const {data} = props.result;
console.log(data);
return (
<div className="container">
<Head>
<title>Buy BTC</title>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
</Head>
<Header />
<Main />
<Footer />
<style jsx> {`
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
`} </style>
</div>
)
}
export async function getServerSideProps(context) {
const result = await coinGeckoClient.simple.price({
ids: "bitcoin",
vs_currencies: "eur",
});
return {
props: {
result,
},
}
}
main.js
import React, { useState } from 'react';
import Button from '#material-ui/core/Button';
import Calculatorbuy from './calculatorbuy.js'
import Calculatorsell from './calculatorsell.js'
export default function Main() {
const [ showMe, setShowMe ] = useState(true);
function toggle (){
if (!showMe) {
setShowMe(true);
}
else {
setShowMe(true);
}
}
function toggle2 (){
if (showMe) {
setShowMe(false);
}
else {
setShowMe(false);
}
}
return (
<main className="main">
<div className="box">
<div className="buttons">
<Button onClick={toggle} variant="outlined" color="primary" style={{width: 120, marginRight: 10}}>
KUP
</Button>
<Button onClick={toggle2} variant="outlined" color="secondary" style={{width: 120, marginRight: 10}}>
SPRZEDAJ
</Button>
<Button variant="outlined" color="default" style={{width: 120,}}>
HISTORIA
</Button>
</div>
<div style={{ display: showMe?"block":"none" }}>
<Calculatorbuy />
</div>
<div style={{ display: !showMe?"block":"none" }}>
<Calculatorsell />
</div>
</div>
<div className="room-for-socials"></div>
import React, { useState } from 'react';
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
import Livebsv from './livebsv.js';
export default function Calculatorbuy() {
const [value, setValue] = useState(0);
return (
<form className="calculator" noValidate autoComplete="off">
<div>
<Livebsv />
</div>
<div className="typebox">
<div className="textfield">
<TextField error={false} id="outlined-number" label="PLN" helperText="Min. wartość 100zł"
type="tel"
value={value}
InputProps={{
inputProps: { min: "100", max: "5000", step: "0.01" }
}}
variant="outlined"
onKeyPress={(e) => {
if (!/[0-9]/.test(e.key)) {
e.preventDefault();
}
}}
onChange={(e) => setValue(e.currentTarget.value)}
onKeyPress={(e) => {
if (!/[0-9]/.test(e.key)) {
e.preventDefault();
}
}}
onBlur={(e) => {
if (e.currentTarget.value > 0 & e.currentTarget.value < 100 )
setValue(100);
else if (e.currentTarget.value > 5000)
setValue(5000);
}}
/>
</div>
<div className="textfield">
<TextField disabled id="outlined-disabled" value={(value).toFixed(8)} label="BSV" variant="outlined"
You started well by loading the result on index.js(getServerSideProps).
Then, to pass the data to Main, you have to add it as a property for the component:
<Main data={data} />
Now, as Main expects a parameter, it has to be defined in main.js:
export default function Main(props) {
const data = props.data;
...
}
Then, for the Calculatorbuy component you have to do the same like on Main. Define the props and use it.
I'm still trying to get the hang of passing state between components in React. I have a NavigationBar and RunSimsModal component, with a Ratings page.
The user tweaks inputs on the Ratings page which then contains inputs that go into RunSimsModal. I'm not sure how to do this as RunSimsModal is only accessible from NavigationBar. The NavigationBar does not know the Ratings state at any time. How do I go about passing data/state from Ratings to RunSimsModal ?
NavigationBar.js
import React, {useState} from "react";
import { Nav, Navbar, Form, FormControl, Button } from "react-bootstrap";
import styled from "styled-components";
import RunSimsModal from "./RunSimsModal";
const Styles = styled.div`
.navbar {
background-color: #222;
}
a,
.navbar-nav,
.navbar-light .nav-link {
color: #9fffcb;
&:hover {
color: white;
}
}
.navbar-brand {
font-size: 1.4em;
color: #9fffcb;
&:hover {
color: white;
}
}
.form-center {
position: absolute !important;
left: 55%;
right: 25%;
}
`;
export const NavigationBar = function () {
const [modalShow, setModalShow] = useState(false);
return <Styles>
<Navbar expand="lg" fixed ="top">
<Navbar.Brand href="/">Decade3</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Form className="form-center">
<FormControl type="text" placeholder="Search" className="" />
</Form>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Button variant="primary" onClick={() => setModalShow(true)} >Run Sims</Button>{' '}
<Nav.Item>
<Nav.Link href="/">Home</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/about">About</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
<RunSimsModal show={modalShow} onHide={() => setModalShow(false)} />
</Styles>
}
RunSimsModal.js
import React, { useState} from "react";
import { Button, Modal, FormFile, Form } from "react-bootstrap";
import * as outrightSimulatorApi from "../api/outrightSimulatorApi";
import Body from "../api/model/body.json";
import { withRouter } from "react-router-dom";
function RunSimsModal({ staticContext, ...props }) {
const [numberofSims, setNumberOfSims] = useState("");
const [simName, setSimName] = useState("");
const runSims = event => {
console.log("triggered");
outrightSimulatorApi.runSim(
Body.clientId,
simName,
numberofSims,
Body.teamRatings, //This is the data I want to pass in from the Ratings page, it's an array
Body.fixtureOverrides,
Body.tournamentId
);
props.history.push("/reports");
};
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Run Simulations
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Run Sims</h4>
<Form onSubmit={runSims}>
<Form.Group controlId="formBasicEmail">
<Form.Label>Number Of Simulations</Form.Label>
<Form.Control
required
type="text"
placeholder="Enter number of sims"
value={numberofSims}
onChange={e => setNumberOfSims(e.target.value)}
/>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>Simulation Name</Form.Label>
<Form.Control
required
type="text"
placeholder="Enter simulation name"
value={simName}
onChange={e => setSimName(e.target.value)}
/>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>Tournament Type</Form.Label>
<Form.Control as="select">
<option>LEAGUE</option>
</Form.Control>
</Form.Group>
<Form.Group controlId="formBasicEmail">
<Form.Label>Teams in tournament</Form.Label>
<FormFile.Input />
</Form.Group>
<Button type="submit">Run</Button>
</Form>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
export default withRouter(RunSimsModal);
Ratings.js
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { Table } from "react-bootstrap";
import NumericInput from "react-numeric-input";
import Teams from "../assets/Teams.js";
import { loadRatings } from "../actions/outrightSimulatorActions";
import ratingsStore from "../stores/ratingsStore";
const GridWrapper = styled.div`
display: grid;
grid-gap: 10px;
margin-top: 4.5em;
margin-left: 6em;
margin-right: 6em;
grid-template-columns: repeat(1, 1fr);
grid-auto-rows: minmax(25px, auto);
`;
const TeamIcon = styled.span`
margin-right: 0.5em;
`;
const teams = Teams;
function Display() {
return (
<GridWrapper>
<div>
<RatingsGrid />
</div>
</GridWrapper>
);
}
function RatingsGrid() {
const [ratings, setRatings] = useState(ratingsStore.getRatings());
useEffect(() => {
ratingsStore.addChangeListener(onChange);
if (ratingsStore.getRatings().length === 0) loadRatings();
return () => {
ratingsStore.removeChangeListener(onChange);
};
}, []);
function onChange() {
console.log("ratings changed");
setRatings(ratingsStore.getRatings());
}
return (
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Teams</th>
<th>Ratings</th>
<th>Home Advantage</th>
</tr>
</thead>
<tbody>
{ratings.map(rating => (
<tr key={rating.teamId}>
<td>
<TeamIcon>
<span>
<img
src={teams.find(t => t.id === rating.teamId).icon}
className="icon"
height="42"
width="42"
alt={rating.teamName}
/>
</span>
{rating.teamName}
</TeamIcon>
</td>
<td>
<NumericInput
value={rating.rating}
step={0.01}
mobile={false}
size="14"
/>
</td>
<td>
<NumericInput value={0.4} step={0.01} mobile={false} size="14" />
</td>
</tr>
))}
</tbody>
</Table>
);
}
export default Display;
I have a problem with React transitions group. For some reason, the fade in and out is not working on Router Switch. I have read the documentation and implemented it inside my App.
Don't know what is wrong with my code.
My React code:
const App = () => (
<Router>
<Menu />
<TransitionGroup>
<CSSTransition
timeout={{ enter: 300, exit: 300 }}
classNames={'fade'}>
<Switch>
{routes.map(route => (
<Route
exact
key={route.path}
path={route.path}
component={route.component}
/>
))}
</Switch>
</CSSTransition>
</TransitionGroup>
</Router>
);
export default App;
Css code:
.fade-enter {
opacity: 0.01;
&.fade-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
}
.fade-exit {
opacity: 1;
&-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
}
Nevermind, forgot to wrap it:
<Route render={({ location }) => (
Thanks.