Can anyone help me to solve this problem with React CSSTransition? The error in the console says:
Error: Failed prop type: Invalid prop children
supplied to CSSTransition
.
My code is in the App component, returning the following: I've created the relevant Search component and necessary CSS classes.
Thank you!
return (
<StateContext.Provider value={{ state }}>
<DispatchContext.Provider value={{ dispatch }}>
<BrowserRouter>
<Header />
<Switch>
<Route path="/" exact>
{state.loggedIn ? <Welcome /> : <Content />}
</Route>
<Route path="/post/:id" exact><SinglePost/></Route>
<Route path='/post/:id/edit'><EditPost/></Route>
<Route path="/create-post">
<CreatePost />
</Route>
<Route path="/about-us" exact>
<About />
</Route>
<Route path="/terms" exact>
<Terms />
</Route>
<Route path='/profile/:username'><Profile/></Route>
<Route><Error/></Route>
</Switch>
<CSSTransition timeout={330} in={state.isSearchOpen} classNames='search-overlay' unmountOnExit> <Search/></CSSTransition>
<Footer />
</BrowserRouter>
</DispatchContext.Provider>
</StateContext.Provider>
)
}
// ----------------------------- Search Component:
return (
<div class="search-overlay">
<div className="search-overlay-top shadow-sm">
<div className="container container--narrow">
<label htmlFor="live-search-field" className="search-overlay-icon">
<i className="fas fa-search"></i>
</label>
<input autoFocus type="text" autoComplete="off" id="live-search-field" className="live-search-field" placeholder="What are you interested in?" />
<span className="close-live-search">
<i className="fas fa-times-circle"></i>
</span>
</div>
</div>
</div>
)