What im trying to achieve in here is to being able to click on a image and render that clicked movie’s info. The problem is the i can not find a way to match id of the clicked movie and the detailed movie. As a result the singleMovierequest has undefined id which causes 404 error. Here is codesandbox link: https://codesandbox.io/s/modern-http-coy0w (Api key is typed as '???' intentionally). Here is movie and app components.
const Movie = (props) => {
const movie = props.singleMovie
const fetchMovie = props.initializeSingleMovie
useEffect(() => { fetchMovie(props.id) }, [props.id])
return (
<div>
<h2>{movie.title}</h2>
<p>{movie.overview}</p>
</div>
)
}
render part of the app component:
<Container>
<h2>Movieapp</h2>
<Router>
<Menu />
<Route exact path="/popular" render={() =>
<PopularMovies />
} />
<Route exact path="/search" render={() =>
<Movies />
} />
<Route exact path="/search/:id" render={(props) => <Movie key={props.match.params.id} />} />
} />
<Route exact path="/popular/:id" render={(props) => <Movie key={props.match.params.id} />} />
</Router>
</Container>
"initializeSingleMovie" is an action,You named it reducer but its an action,for the sake of solving this problem ,you have to use mapDisptachToProps and dispatch(it will access the store methods),below is a modifed Movie.js File.In future have a separate action folder for api hits.Compartmentalise more,hope it helps.
import React from 'react'
import { connect } from 'react-redux'
import { useEffect } from 'react'
import { initializeSingleMovie } from '../reducers/singleMovieReducer'
const Movie = (props) => {
console.log(props,"");
const movie = props.singleMovie
props.initializeSingleMovie(props.id)
return (
<div>
<h2>{movie.title}</h2>
<p>{movie.overview}</p>
</div>
)
}
const mapStateToProps = (state) => {
return {
singleMovie: state.singleMovie
}
}
const mapDispatchToProps = dispatch => {
return {
initializeSingleMovie: (id) => dispatch(initializeSingleMovie(id)),
};
};
export default connect(
mapStateToProps,
mapDisptachToProps
)(Movie)
Related
I am using react-router-dom and I am trying to push to the browser history using the history object from the useHistory hook. The path that I push to should trigger some logic within the router which will force a redirect to another path (which renders some content).
My issue is that the <Redirect /> does not seem to be doing anything and I'm not 100% sure I know why. I created a codepen to demonstrate the issue that I am having. (Same as code below). You can see the issue if you manually navigate the browser in the codepen to the main route e.g https://c629mk.csb.app/, you will see no content load.
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import {
Route,
Switch,
Redirect,
useHistory,
BrowserRouter,
useRouteMatch
} from "react-router-dom";
const HomeRouter = () => {
const { path } = useRouteMatch();
const someRouterSpecificLogic = true;
const initialPath = someRouterSpecificLogic ? "location" : "videos";
return (
<Switch>
<Route path={`${path}/location`} render={() => <h1>Location</h1>} />
<Route path={`${path}/videos`} render={() => <h1>Videos</h1>} />
<Redirect from={`${path}/`} to={`${path}/${initialPath}`} />
</Switch>
);
};
const AboutRouter = () => {
const { path } = useRouteMatch();
return (
<Switch>
<Route path={`${path}/history`} render={() => <h1>History</h1>} />
<Route path={`${path}/background`} render={() => <h1>Background</h1>} />
<Redirect from={`${path}/`} to={`${path}/history`} />
</Switch>
);
};
const useSomeAsyncHook = () => {
const [asyncResult, setAsyncResult] = useState(false);
useEffect(() => {
setTimeout(() => {
setAsyncResult("someValue");
}, 300);
});
return asyncResult;
};
const AppRouter = () => {
const history = useHistory();
const asycnResult = useSomeAsyncHook();
useEffect(() => {
if (asycnResult === "someValue") {
history.push("/home");
}
}, [history, asycnResult]);
return (
<>
<p>There should be other content rendering on this page:</p>
<Switch>
<Route path="/home" component={HomeRouter} />
<Route path="/about" component={AboutRouter} />
<Redirect from="/" to="/home" />
</Switch>
</>
);
};
const App = () => {
return (
<BrowserRouter>
<AppRouter />
</BrowserRouter>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
What I think is happening is this:
/ renders triggering the Redirect to /home
useEffect pushes / to the history again
Redirect logic does not work the second time around
I am wondering if anyone knows how to force the redirect to happen at 3 again?
This can be resolved by adding a loadState to the code. This way the routes / redirect logic only renders after the history.push has taken place.
I was confused because I thought that history.push would update the internal state of browserRouter and trigger a rerender of all child routes/ redirects. This is not the case. In my case history.push did not cause the Redirect component to rerender to it did not trigger another redirect and the user would just see a white screen. Adding a loadstate as shown below resolved the problem for me:
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import {
Route,
Switch,
Redirect,
useHistory,
BrowserRouter,
useRouteMatch
} from "react-router-dom";
const HomeRouter = () => {
const { path } = useRouteMatch();
const someRouterSpecificLogic = true;
const initialPath = someRouterSpecificLogic ? "location" : "videos";
return (
<Switch>
<Route path={`${path}/location`} render={() => <h1>Location</h1>} />
<Route path={`${path}/videos`} render={() => <h1>Videos</h1>} />
<Redirect from={`${path}/`} to={`${path}/${initialPath}`} />
</Switch>
);
};
const AboutRouter = () => {
const { path } = useRouteMatch();
return (
<Switch>
<Route path={`${path}/history`} render={() => <h1>History</h1>} />
<Route path={`${path}/background`} render={() => <h1>Background</h1>} />
<Redirect from={`${path}/`} to={`${path}/history`} />
</Switch>
);
};
const useSomeAsyncHook = () => {
const [asyncResult, setAsyncResult] = useState(false);
const [asyncResultFetched, setAsyncResultFetched] = useState(false);
useEffect(() => {
setTimeout(() => {
setAsyncResult("someValue");
setAsyncResultFetched(true);
}, 300);
});
return { asyncResult, asyncResultFetched };
};
const AppRouter = () => {
const history = useHistory();
const { asycnResult, asyncResultFetched } = useSomeAsyncHook();
useEffect(() => {
if (asycnResult === "someValue") {
history.push("/home");
}
}, [history, asycnResult]);
if (!asyncResultFetched) {
return <h1>Loading...</h1>;
}
return (
<>
<p>There should be other content rendering on this page:</p>
<Switch>
<Route path="/home" component={HomeRouter} />
<Route path="/about" component={AboutRouter} />
<Redirect from="/" to="/home" />
</Switch>
</>
);
};
const App = () => {
return (
<BrowserRouter>
<AppRouter />
</BrowserRouter>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
Thank you to #Abdulrahman Ali and #Drew Reese for their assistance in helping me realise what my issue was in the comments of my question above
I am fetching few products from an API, and displaying them in card. There is a More Details link on the cards, where if the user clicks on it, it will take the user to the selected product details page. My routing to productDetails page works, But I am having troubles to find a way to pass the fetched data to the productDetails page as props.
This is what I have so far:
My FeaturedProduct.js:
import React from "react";
import { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import ProductDetails from "./ProductDetails";
import axios from "axios";
function FeaturedProduct(props) {
const [products, setProducts] = useState([]);
useEffect(() => {
fetchProducts();
}, []);
function fetchProducts() {
axios
.get("https://shoppingapiacme.herokuapp.com/shopping")
.then((res) => {
console.log(res);
setProducts(res.data);
})
.catch((err) => {
console.log(err);
});
}
return (
<div>
<h1> Your Products List is shown below:</h1>
<div className="item-container">
{products.map((product) => (
<div className="card" key={product.id}>
{" "}
<h3>{product.item}</h3>
<p>
{product.city}, {product.state}
</p>
<Router>
<Link to="/productdetails">More Details</Link>
<Switch>
<Route path="/productdetails" component={ProductDetails} />
</Switch>
</Router>
</div>
))}
</div>
</div>
);
}
export default FeaturedProduct;
My Product Details Page:
import React from "react";
import FeaturedProduct from "./FeaturedProduct";
function ProductDetails(props) {
return (
<div>
<div>
<h1>{props.name}</h1>
<h1>{props.color}</h1>
</div>
</div>
);
}
export default ProductDetails;
I am still learning but this is what I would do:
<Route path="/productdetails">
<ProductDetails product={product}/>
</Route>
====
On ProductDetails you can destructure the props:
function ProductDetails(props) {
const {name, color} = props.product;
return (
<div>
<div>
<h1>{name}</h1>
<h1>{color}</h1>
</div>
</div>
);
}
export default ProductDetails;
Pass it as an element with props, if you are using v 6; sorry I didn't ask which version. >
<Switch>
<Route path="/productdetails" element={<ProductDetails {...props} />}/>
</Switch>
if version v4/5 use the render method >
<Route path="/productdetails" render={(props) => (
{ <ProductDetails {...props} />} )}/>
//pass it this way
<Switch>
<Route
path="/productdetails"
render={() => (
{ <ProductDetails product={product}/>})}/>
/>
</Switch>
I'm struggling to figure out how to pass the search term from ChildOne to ChildTwo (which is nested in a page). I hope all the code I provided down below will make it clear. I tried to lift up the state to the App.js component but it didn't work or maybe I didn't do it correctly. I would appreciate any help. Thanks in advance :)
Child 1:
const ChildOne = () => {
const [searhTerm, setSearchTerm] = useState("");
return(
<InputContainer>
<input
type="text"
placeholder="Find a recipe"
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
}}
/>
<SearchIcon />
</InputContainer>
)
}
Child 2:
const ChildTwo = () => {
// I want to pass the searchTerm to be used in a fetch request in this component
const apiURL = `'url' + {searchTerm}`;
return(
...
)
}
App.js
function App(){
return(
<>
<ChildOne/>
<Switch>
<Route path="/" exact component={Home}/>
<Switch/>
</>
)
}
Home.js:
const Home = () => {
return (
<>
<ChildTwo />
</>
);
};
there is several way to do that...
I suggest you use Context Api.
if you don't want to use Context Api or State management
see this example
enter link description here
import { useState } from "react";
import {
Route,
Switch,
BrowserRouter as Router,
RouterProps
} from "react-router-dom";
import ChildOne from "./ChildOne";
import Home from "./Home";
function App() {
const [value, setValue] = useState("");
return (
<>
<ChildOne setValue={setValue} />
<Router>
<Switch>
<Route path="/" exact>
<Home value={value} />
</Route>
</Switch>
</Router>
</>
);
}
export default App;
hello
I am trying to make a menu toggle, where I have a variable with false as initial value, using react createContext and useContext hook, I set the initial state as true
// useMenu Context
import React, { useContext, useState } from 'react'
export const useToggle = (initialState) => {
const [isToggled, setToggle] = useState(initialState)
const toggle = () => setToggle((prevState) => !prevState)
// return [isToggled, toggle];
return { isToggled, setToggle, toggle }
}
const initialState = {
isMenuOpen: true,
toggle: () => {},
}
export const MenuContext = React.createContext(initialState)
const MenuProvider = ({ children }) => {
const { isToggled, setToggle, toggle } = useToggle(false)
const closeMenu = () => setToggle(false)
return (
<MenuContext.Provider
value={{
isMenuOpen: isToggled,
toggleMenu: toggle,
closeMenu,
}}>
{children}
</MenuContext.Provider>
)
}
export default MenuProvider
export const useMenu = () => {
return useContext(MenuContext)
}
so If true it will show the Menu if false it will show the Div where there a div
App.js
const { isMenuOpen } = useMenu()
//the providder
<MenuProvider>
<Header mode={theme} modeFunc={toggleTheme}/>
{isMenuOpen ? (
<Menu />
) : (
<Switch>
<Route path='/writing' component={Writings} />
<Route path='/meta' component={Meta} />
<Route path='/contact' component={Contact} />
<Route path='/project' component={Project} />
<Route exact path='/' component={Home} />
<Route path='*' component={NotFound} />
</Switch>
)}
<Footer />{' '}
</MenuProvider>
and when I add an onclick event the NavLink button of the menu to close it it does not work
Menu
const { closeMenu } = useMenu()
// return statement
{paths.map((item, i) => {
return (
<MenuItem
key={i}
link={item.location}
svg={item.icon}
path={item.name}
command={item.command}
onClick={closeMenu}
/>
)
})}
where did I go wrong
Issue
I suspect the issue is in App where you've a useMenu hook outside the MenuProvider used in App. This useMenu hook is using a MenuContext context but in the absence of a provider it instead uses the default initial context value.
const initialState = {
isMenuOpen: true,
toggle: () => {},
};
export const MenuContext = React.createContext(initialState);
export const useMenu = () => {
return useContext(MenuContext)
};
React.createContext
const MyContext = React.createContext(defaultValue);
Creates a Context object. When React renders a component that
subscribes to this Context object it will read the current context
value from the closest matching Provider above it in the tree.
The defaultValue argument is only used when a component does not
have a matching Provider above it in the tree. This default value can
be helpful for testing components in isolation without wrapping them.
Solution
Since I doubt you want to run/provide more than one menu provider I believe the solution is to move MenuProvider out of and wrap App to provide the context you are updating by nested components.
App.jsx
const { isMenuOpen } = useMenu();
...
<>
<Header mode={theme} modeFunc={toggleTheme}/>
{isMenuOpen ? (
<Menu />
) : (
<Switch>
<Route path='/writing' component={Writings} />
<Route path='/meta' component={Meta} />
<Route path='/contact' component={Contact} />
<Route path='/project' component={Project} />
<Route exact path='/' component={Home} />
<Route path='*' component={NotFound} />
</Switch>
)}
<Footer />
</>
index.jsx (?)
import App from './App.jsx';
...
//the provider
<MenuProvider>
<App />
</MenuProvider>
Please see this sandbox:
https://codesandbox.io/s/use-context-simple-qygdz?file=/src/App.js
*** You have to go to /check1 to start, and when you reach /check2 there shouldn't be a ddd, but it's still there right now (state not updated)
When I've linked one page to another, the usecontext does not pass the state. Not sure why - but I am glad that with help we were able to pinpoint exactly where the problem is.
maybe it helps if you just use one useState hook from which you update your entire context I included the main parts below (here is a link to a working sample). When i try this i see context changes in every component.
import React from "react";
import "./styles.css";
import ChangeContext from "./components/ChangeContext";
import ViewChange from "./components/ViewChange";
const info = {
artists: null,
messages: null,
songs: null,
userid: "ddd",
accesstoken: null,
refreshtoken: null
};
export const InfoContext = React.createContext();
export default function App() {
const [context, setContext] = React.useState(info);
return (
<InfoContext.Provider value={[context, setContext]}>
<div className="App">
<ChangeContext />
<ViewChange />
</div>
</InfoContext.Provider>
);
}
and then in a component
import React from "react";
import { InfoContext } from "../App";
export default function App() {
const [context, setContext] = React.useContext(InfoContext);
return (
<div className="App">
<h1>{context.userid} uid</h1>
<button
onClick={e => {
setContext({ ...context, userid: 123 });
}}
>
click me
</button>
</div>
);
}
in another component check for changes
import React from "react";
import { InfoContext } from "../App";
export default function ChangeContext() {
const [context, setContext] = React.useContext(InfoContext);
return (
<div className="App">
<h1>{context.userid} uid</h1>
<button
onClick={e => {
setContext({ ...context, userid: 123 });
}}
>
click me
</button>
</div>
);
}
maybe try this instead
const [context, setContext] = useState(info);
return (
<BrowserRouter>
<Route exact path="/signup/:id/:access_token" render={() => <InfoContext.Provider value={[context, setContext]}><Signup /> </InfoContext.Provider>} />
<Route exact path="/" render={() => <Login />} />
<Route exact path="/home/:id/:access_token/:refresh_token" render={() => <Homepage ></Homepage>} />
<Route exact path="/artist/:artistid" render={() => <ArtistPage ></ArtistPage>} />
<Route exact path="/map" render={() => <MapLeaflet />} />
</BrowserRouter>
);
I can't comment yet, but is the userId being updated in the context?
What is the value for console.log(userid) inside artisthomepage.js? Maybe it renders with the old value but then it receives the new one and doesn't re-render the component.