How to access passed data using router from one component to another ReactJS

Question

//import routes from "./routes";
import { Link, withRouter, NavLink, useHistory } from "react-router-dom";

export default function App() {
  console.log(this.props.data.data);
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
...}

This part of code in slider.js accessing data variable passed from last page, mentioned below

        axios
        .post(
          "/get_spec_other",
          {
            selected_country: this.props.selectedCountry,
            selected_disease: this.props.selectedDisease,
            selected_drug: this.props.selectedDrugs,
          },
          { headers: { "content-type": "application/json" } }
        )
        .then((res) => {
          const SpecificationName = Array.from(res.data);
          console.log(res.data);
          this.props.history.push({pathname: '/slider', data: res.data});

          alert(res.data);

This is where I am passing data to /slider, and opening slider.js .

Justin Henry · Accepted Answer · 2020-11-25T03:17:40.813

1

The problem is that you are using a functional component and expecting "this" to be there. This is how it should look: (Notice the props declared in the function argument of App)

//import routes from "./routes";
import { Link, withRouter, NavLink, useHistory } from "react-router-dom";

export default function App(props) {
  console.log(props.data.data);
  const [value1, setValue1] = useState(0);
  const [value2, setValue2] = useState(0);
...}

Another thing you will need to do is review that you are using the proper hooks to obtain the data: https://css-tricks.com/the-hooks-of-react-router/

edited Nov 25 '20 at 03:17

answered Nov 25 '20 at 02:57

Justin Henry

26
2

TypeError: Cannot read property 'data' of undefined `App src/App.js:26 23 | import { Link, withRouter, NavLink, useHistory } from "react-router-dom";` 24 | `25 | export default function App(props) {` `> 26 | console.log(props.data.data);` `27 | const [value1, setValue1] = useState(0); 28 | const [value2, setValue2] = useState(0); 29 | const [value3, setValue3] = useState(0);` – tejesh Nov 25 '20 at 03:03
As If I use only, console.log(props.data), it gives undefined – tejesh Nov 25 '20 at 03:07
1

You need to analyze where the props are coming from. console.log(props) and see what is provided. Perhaps the router is passing the data in a different way to your component. – Justin Henry Nov 25 '20 at 03:15
Yes, I did it, but it is empty – tejesh Nov 25 '20 at 03:17
1

You may want to read: https://stackoverflow.com/questions/52238637/react-router-how-to-pass-data-between-pages-in-react – Justin Henry Nov 25 '20 at 03:19
Thankyou! I realized where I was going wrong, I was not passing data from parent to child component `render() { const { data } = this.props.location console.log(data); ...}` ................. `return ( .... ...}` ........... `export default function App(data) { //const { data } = props.location console.log(data); ......} ` – tejesh Nov 25 '20 at 03:29

score 0 · Answer 2 · answered Nov 25 '20 at 03:44

Thankyou! I realized where I was going wrong, I was not passing data from parent to child component

render() {     
const { data } = this.props.location     
console.log(data); ...
}

return ( 
....  
<App data={data}/> 
...
}

export default function App(data) {   
//const { data } = props.location   
console.log(data); 
......
}

How to access passed data using router from one component to another ReactJS

This part of code in slider.js accessing data variable passed from last page, mentioned below

This is where I am passing data to /slider, and opening slider.js .

2 Answers2