score:1
Accepted answer
the react-router-dom
link
component api changed a bit from v5 to v6.
state
is now a "top-level" prop.
interface linkprops extends omit< react.anchorhtmlattributes<htmlanchorelement>, "href" > { replace?: boolean; state?: state; to: to; }
in the home
component you can just move the state
from the to
object up to be a prop on the link
.
<list>
{covidsdata.map((coviddata) => {
return (
<div key={coviddata.id}>
<listitem>
<listitemtext primary={coviddata.country} />
<link
classname="link-details"
to={`/view-details/${coviddata.id}`}
state={{ covidsdata: coviddata }} // <-- state is a prop
>
<button
style={{ marginleft: "0.5em", height: "1.8em" }}
variant="contained"
>
view
</button>
</link>
</listitem>
<divider />
</div>
);
})}
</list>
Source: stackoverflow.com
Related Query
- React Routing not working, upgrading from v5 to v6
- Nested routing is not working in React Router dom V4 from individual component and works only from App.js component
- React Context API not working from custom NPM component library
- Paste from clipboard not working with React Native on iOS simulator
- Nested routing is not working in React Router v6
- Upgrading From Create-React-App to Next.js - CSS stylesheets are not working
- Upgrading font awesome icons in gatsby react project, new icons not working
- React class styling from css stylesheet not working
- Multi row swiper not working in react from swiper.js
- Getting multiple checkbox values from react not working
- Firebase auth and React Hook - returning function from hook not working
- React hook is not working from event handler
- Image tag not working in react while sending image path from rails backend
- "Res.redirect" Not Working when making Ajax call from React to Node?
- Redirect in React Router not working when I click from Users to Post
- array of selected values which I want to delete from state is not working as expected - React
- React hooks not working when imported from local library
- Nested Routing Not Working in React Router v6
- CSS not working for nested routing in react js
- React react-router-dom private route not working when auth token is asynchronously loaded from cookies
- Add value from input into array is not working in React
- React setState not working after deleting data from state copy
- Fetch API not working with Rails + React from Webpacker
- React routing not working while manually changing URL | React-router 4
- Zip File Download via Axios from Express Server not working in React App
- Push object from JSON rest api into empty array not working in React
- Hash routing Navigation is not working - react router redux
- Why is map not working with json from api, while locally created json works fine? React
- React history.push not working from the Home component
- Passing data from child to parent component not working in react
More Query from same tag
- How to make Jest wait for state to update - React / Jest / Enzyme
- Toggling an attribute on a ReactJS MaterialUI FloatingButton on click
- Why is my React component state showing up in my url?
- ReactJS setState when select is rendered
- Cannot update particular property of object in react js using setState
- Remove all items from array using Reducer - React
- Can't figure out where to initiate CronJob in react app
- How to build a route on yandex maps in react via react-yandex-maps
- React: use Children.map to edit props and use functions as Children in the same time
- How to map object data and render in React?
- "Only one instance of babel-polyfill is allowed" error
- react-google-maps align MarkerWithLabel horizontally
- Sort and group objects alphabetically by first letter Javascript
- How to properly use map() in a array?
- How to update the props of a rendered react component from App.js?
- React Private Routing Firebase
- Webpack 4 css modules TypeError: Cannot read property 'context' of undefined
- Redirect to new page on Submit: this.props.history.push
- How to get value of corresponding cell of table on click
- How to read value from react-hook-form from another component
- Setting up Jest to test JSX files
- Getting error Invariant Violation tried to get frame out of range index?
- Why does the setTimeOut not being cleared by using clean up function in React (useEffect)?
- Material Ui - Unable to enter input textfield/ set values on a controlled component
- Google reCaptcha to work in React.js?
- NodeJS + Express Cors + SocketIO = XMLHttpRequest error
- Redirect from a Register Form with React Class in v6
- Apollo useQuery or client.query React failing to log values
- How to get component loaded state in Next.js?
- How to add react style no-repeat