So, I'm having a bit of an issue when it es to routing and managing my data.
The Listing ponent is essentially a ton of cards with movie data that I am fetching from a gist of mine. I created a ponent for each card using .map and adding the value to the prop.
My goal: When I click a button for any of the cards, I would like to go to a page and access that movie card's name dynamically.
For Example::
Suppose I click on a button that says "MoreInformation" for one particular movie card. I get routed to the MoreInformation page because the button will be contained in a Link.
Inside the MoreInformation Page/Component I would like to dynamically add:
<h1>{name}</h1>
This is just a basic example of what I am trying to acplish, but in other words how do I transfer the data of that particular movie card to the MoreInformation page so that I can access it to add dynamic data.
I will be extremely grateful if I can get feedback as this project is time sensitive... Thanks guys.
const MoviesPage = () => {
const [movies, setMovies] = useState([])
useEffect(() => {
axios
.get(
``
)
.then(res => {
const data = res.data
setMovies(data)
})
}, [])
return (
<Layout>
<div style={{ background: "hsl(215, 100%, 3%" }}>
<TopThree />
<p style={{ color: "#e0dfe2", fontSize: "1.7rem", marginTop: "3rem" }}>
<b
style={{
padding: ".5rem 1.5rem .5rem 1.5rem",
background: "#f9ba00",
fontSize: "2rem",
marginLeft: "4rem",
color: "black"
}}
>
!
</b>{" "}
Click 'Remove' to remove movies you definitely will not watch! There
is an undo option.
</p>
<div className={listingCSS.block}>
{movies.map(movie => {
return (
<Listing
key={movie.name}
name={movie.name}
plot={movie.plot}
date={movie.releaseDate}
genre={movie.genre}
imdbRating={movie.imdbRating ? movie.imdbRating : "N/A"}
tomatoRating={movie.tomatoRating ? movie.tomatoRating : "N/A"}
metaRating={movie.metaRating ? movie.metaRating : "N/A"}
erbertRating={movie.erbertRating ? movie.erbertRating : "N/A"}
tmdbRating={movie.tmdbRating ? movie.tmdbRating : "N/A"}
movshoRating={movie.movshoRating}
streamOn={movie.streamOn}
poster={movie.poster}
alt={movie.name}
/>
)
})}
</div>
</div>
</Layout>
)
}
So, I'm having a bit of an issue when it es to routing and managing my data.
The Listing ponent is essentially a ton of cards with movie data that I am fetching from a gist of mine. I created a ponent for each card using .map and adding the value to the prop.
My goal: When I click a button for any of the cards, I would like to go to a page and access that movie card's name dynamically.
For Example::
Suppose I click on a button that says "MoreInformation" for one particular movie card. I get routed to the MoreInformation page because the button will be contained in a Link.
Inside the MoreInformation Page/Component I would like to dynamically add:
<h1>{name}</h1>
This is just a basic example of what I am trying to acplish, but in other words how do I transfer the data of that particular movie card to the MoreInformation page so that I can access it to add dynamic data.
I will be extremely grateful if I can get feedback as this project is time sensitive... Thanks guys.
const MoviesPage = () => {
const [movies, setMovies] = useState([])
useEffect(() => {
axios
.get(
`https://gist.githubusercontent./ernestosotelo/9932c659b460e5ddeec8a8ae76164a0d/raw/ce8d7b248f61e73bf3c767538728505d6bac9835/json`
)
.then(res => {
const data = res.data
setMovies(data)
})
}, [])
return (
<Layout>
<div style={{ background: "hsl(215, 100%, 3%" }}>
<TopThree />
<p style={{ color: "#e0dfe2", fontSize: "1.7rem", marginTop: "3rem" }}>
<b
style={{
padding: ".5rem 1.5rem .5rem 1.5rem",
background: "#f9ba00",
fontSize: "2rem",
marginLeft: "4rem",
color: "black"
}}
>
!
</b>{" "}
Click 'Remove' to remove movies you definitely will not watch! There
is an undo option.
</p>
<div className={listingCSS.block}>
{movies.map(movie => {
return (
<Listing
key={movie.name}
name={movie.name}
plot={movie.plot}
date={movie.releaseDate}
genre={movie.genre}
imdbRating={movie.imdbRating ? movie.imdbRating : "N/A"}
tomatoRating={movie.tomatoRating ? movie.tomatoRating : "N/A"}
metaRating={movie.metaRating ? movie.metaRating : "N/A"}
erbertRating={movie.erbertRating ? movie.erbertRating : "N/A"}
tmdbRating={movie.tmdbRating ? movie.tmdbRating : "N/A"}
movshoRating={movie.movshoRating}
streamOn={movie.streamOn}
poster={movie.poster}
alt={movie.name}
/>
)
})}
</div>
</div>
</Layout>
)
}
- You can add unique identifiers to each movie and pass that identifier to the other page through the URL. On the other page just retrieve the appropriate movie's details from the server or some kind of in memory/local storage. – Titus Commented May 12, 2019 at 8:50
- I think this other post is a plement to how it works. stackoverflow./questions/55219775/… – Erick Commented Sep 17, 2021 at 21:24
2 Answers
Reset to default 2You need to create a route for displaying the data passed. For example
<Route path="/movieInfo/:name" exact ponent={MoreInformation} />
In your listing create a link to more information ponent
<Link to={`/movieInfo/${this.props.name}`}>More info</Link>
In your MoreInformation ponent access the prop like
const { name } = this.props;
Simple Demo here
If you are using functional ponents, you can retrieve the value, like below. Inside match params.
function MoreInformation(props) {
const name = props.match.params.name;
return <h1>{name}</h1>;
}
You could use JS with HTML 5 elements to store the data on session (sessionStorage.getItem() and sessionStorage.setItem()) or locally (localStorage.getItem() and localStorage.setItem()).
If you prefer storing the data on setItem by variables :
var session_data = sessionStorage.myValue //For session only
var local_data = localStorage.myValue //For local
sessionStorage.myValue = 'value' //For session only
localStorage.myValue = 'value' //For local
Remember also : To store JavaScript objects you should set and change them to a string value :
sessionStorage.myObject = JSON.stringify(myObject); // Setting the object to a string
And parsing it back to object to retrieve the data when using getItem :
var myObject = JSON.parse(sessionStorage.myObject); // Parsing JSON back from string to object
ALSO : You could use window.name to store information, but note that it works only when the same window/tab is used, so make sure your button or link has the target value set to _self.
You can read about storing data without cookies with JavaScript HERE
For info about the Web Storage API : https://developer.mozilla/en-US/docs/Web/API/Web_Storage_API
For info about PersistJS (might interest you) : https://github./jeremydurham/persist-js