Nutshell:
<layout direction="horizontal"> <!--ParentX -->
<layout>ChildA</layout>
<layout>ChildB</layout>
<layout direction="vertical"> <!--ParentY -->
<layout>ChildC</layout>
<layout>ChildD</layout>
</layout>
</layout>
How can I know ParentY's direction from ChildC link-function?
Plunker
Related
I keep encountering the error
could not find react-redux context value; please ensure the component is wrapped in a <Provider>
even though I wrapped my root file in the <Provider> already. My suspicion on what might be wrong is that instead of nested components being wrapped in the <Provider> it is a "Link" to the page that is wrapped instead?
My index.tsx file looks like this
<Provider store={reduxStore}>
<Layout>
<title>Home</title>
<div>
<Image
width="100%"
src="./app-promo1.png"
alt="app promo banner 1"
/>
<Image
width="100%"
src="./app-promo2.png"
alt="app promo banner 2"
/>
</div>
</Layout>
</Provider>
My navbar is inside a Header component which is inside the Layout component.
Layout.tsx
<div>
<LayoutWrapper>
<HeaderWrapper>
<div className="d-none d-md-block">
<Header />
</div>
<div className="d-block d-md-none">
<MobileHeader />
</div>
</HeaderWrapper>
<ContentWrapper>{children}</ContentWrapper>
<FooterWrapper>
<Footer />
</FooterWrapper>
</LayoutWrapper>
</div>
Header.tsx
<Wrapper>
<Container>
<NavWrapper>
<Logo>
<AniLink paintDrip hex="#24B2D8" to="/">
<Image src={logoImg} width="220px" alt="Logo" />
</AniLink>
</Logo>
<div className="d-flex flex-row justify-content-center align-items-center">
<AniLink paintDrip to="/shop" hex="#24B2D8">
<NavItem>Shop</NavItem>
</AniLink>
<AniLink paintDrip to="/activation" hex="#24B2D8">
<NavItem>Activation</NavItem>
</AniLink>
<AniLink cover to="/partners" bg="#24B2D8">
<NavItem>Partners</NavItem>
</AniLink>
<AniLink cover to="/support" bg="#24B2D8">
<NavItem>Support</NavItem>
</AniLink>
</div>
<Button
link="/"
text="Log in"
color="blue"
/>
</NavWrapper>
</Container>
</Wrapper>
The pages that I need the Redux/Provider in are all of these links. ie: /shop, /activation, /partner, and /support. But when I navigate from / to /shop it gives me the error.
One thing to note is that I'm using Gatsby and not create-react-app. I am not sure if there is something special that I would have to do on Gatsby or not.
Your providers need to wrap your component across your application, that's why when you change the page the context is lost. To achieve that in Gatsby, you have available the dual (gatsby-browser.js/gatsby-ssr.js) wrappRootElement API:
const React = require("react")
const { Provider } = require("react-redux")
const createStore = require("./src/state/createStore")
const store = createStore()
exports.wrapRootElement = ({ element }) => {
return (
<Provider store={store}>
{element}
</Provider>
)
}
element stands for the root React element built by Gatsby.
i have an api "xyz.com/products/" and i have made an route xyz.com/products/1. This will give me an product with the id 1 . And it will render product page Component with that product details...But now on that particular product page i have an gallery of related product with their own individual "Link" to open in same product page . but when i click on any one of them ....the url changes like this "xyz.com/product/1/23" but i want only to change path like "xyz.com/products/1" --> "xyz.com/products/23"
here is my code snippets
// ///// route and link both are on App Component/////////////////
// this is the route that i have that matches xyz.com/product/1
<Route
path="/product/:id"
render={() => (
<Fragment>
<ProductContext.Provider value={{ productState, productStateDispatch }}>
<Product />
<div className={`overlay ${productState.packageSidebar}`}></div>
</ProductContext.Provider>
</Fragment>
)}
/>;
these are links will go on product page
<Row title="Our best seller">
{homeState.bestSellerProducts.map((product, index) => (
<Link
to={{
pathname: `/product/${product.id}`,
search: `type=${product.type}`,
}}
className="product-link"
key={index}
>
{" "}
<Card {...product} />
</Link>
))}
</Row>
//////////////////////////////
// this is in my product component where i have used one more component called imageGallery inside it. in which we have links////////////
{images.map((imgObj, index) => {
console.log(imgObj);
return (
<div className="item" key={index}>
<Link to={`/${imgObj.id}`} className="product-link">
<div className="img">
<img
height={100}
width={100}
src={imgObj.product_image}
alt="product-img"
/>
</div>
</Link>
</div>
);
})}
// i know i messing in routing i hope will get solution.... i just want that when i click on any link in this imageGallery component .it should be open inside same product page in which i m already present.. thats it
Including exact keyword in the Route component might solve your problem, try out!, demo example:
<Route exact to='/' component={home} />
Hi i try to animate 2 routes form opacity 1 to 0 on exit. But for some reason on <Link> click the routes will change(ex. '/' => '/chat?name=bob&room=here') but the page content stay the same and it wont render the component of that specific route. Also the animation is working great once i use the "Go back button" from browser.
Anyone have idea why is not working on button click?
App.js
return (
<div>
<Router>
<AnimatePresence exitBeforeEnter>
<Switch location={location} key={location.key}>
<Route path="/" exact component={Login}></Route>
<Route path="/chat" component={ChatRoom}></Route>
</Switch>
</AnimatePresence>
</Router>
</div>
);
Login.js
return (
<motion.div
initial="out"
animate="in"
exit="out"
variants={pageTransition}
className="Login-Container"
>
//same code
<Link
onClick={(event) => (!name || !room ? event.preventDefault() : null)}
to={`/chat?name=${name}&room=${room}`}
>
<button
type="submit"
className="Login-Button"
>
Sign In
</button>
</Link>
</motion.div>
);
ChatRoom.js
return (
<motion.div
initial="out"
animate="in"
exit="out"
variants={pageTransition}
className="ChatRoom-Container"
>
<div className="ChatRoom-NavBar">
<NavLink to="/">
<div
className="ChatRoom-BackButton"
style={{ backgroundImage: `url(${arrow})` }}
></div>
</NavLink>
</div>
</motion.div>
);
};
Your initial and exit prop on motion.div seem to be using the same key i.e "out" try giving the exit prop a different key. Dont forget to adjust your variants as well when you make the change.
I am trying to switch between a sign-in, register and a home page form using ternary operator. But, when I compile, there's an error saying 'this.state.route === signIn' this is a reserved keyword. I know, what a reserved keyword is but I can't get why its assigning this instead of checking the condition, can anyone help correct my code?
<Navigation onRouteChange={this.onRouteChange}/> /*route change for sign out button*/
{ this.state.route === 'home'/*displays homescreen*/
? <div>
<Logo />
<Rank />
<ImageLinkForm
onInputChange={this.onInputChange}
onSubmit={this.onSubmit}
/>
<FaceRecognition box={this.state.box}
imageUrl= {this.state.imageUrl} />
</div>
:{
this.state.route === 'signIn'/*shows error that this is a reserved keyword*/
? <SignIn onRouteChange={this.onRouteChange} />
:<Register onRouteChange={this.onRouteChange} />
}
}
Seems there's an extra curly bracket after colon. Also try separating objects using round brackets for readablility. Try this :
<Navigation onRouteChange={this.onRouteChange} />
{this.state.route === 'home' ? (
<div>
<Logo />
<Rank />
<ImageLinkForm
onInputChange={this.onInputChange}
onSubmit={this.onSubmit}
/>
<FaceRecognition box={this.state.box} imageUrl={this.state.imageUrl} />
</div>
) : (
this.state.route === 'signIn
? <SignIn onRouteChange={this.onRouteChange} />
: <Register onRouteChange={this.onRouteChange} />
)}
I have a React app that is using the Algoia InstantSearch library. This one https://community.algolia.com/react-instantsearch/
<InstantSearch
appId="KJH78673IUH"
apiKey="e55e048w7fh8wh8wrgh834c3ea51e3"
indexName="Events"
>
<Configure hitsPerPage={10} />
<SearchBox />
<h3>Latest Events</h3>
<Hits />
<Index indexName="Venues">
<h3>Latest Venues</h3>
<Hits />
</Index>
<Index indexName="Users">
<h3>Latest Users</h3>
<Hits />
</Index>
</InstantSearch>
This works fine and pulls the results as I type. However. On each of the Event, Venue and User records I have an attribute site_id. I am struggle to figure out how I can set the site_id to be like a default scope on the search query. Along the lines of how default_scope works in Rails. I am sure this is possible but failing to figure it out.
Any help would be appreciated!
I figured out how to do this using VirtualWidgets.
https://community.algolia.com/react-instantsearch/connectors/connectMenu.html
The scope an index to a particular attribute I used the following method:
import { connectMenu } from 'react-instantsearch/connectors';
const VirtualMenu = connectMenu(() => null);
// RESET OF COMPONENT CODE
<InstantSearch
appId="KJH78673IUH"
apiKey="e55e048w7fh8wh8wrgh834c3ea51e3"
indexName="Events"
/>
<Configure hitsPerPage={10} />
<VirtualMenu attribute="site_id" defaultRefinement="1" />
<SearchBox />
<h3>Latest Events</h3>
<Hits />
<Index indexName="Venues">
<h3>Latest Venues</h3>
<Hits />
</Index>
<Index indexName="Users">
<h3>Latest Users</h3>
<Hits />
</Index>
</InstantSearch>
You can also add the VirtualWidget to the Index block itself too.