Pass data between class Component and function (React)

Question

I got class Component where I'm passing data:

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class VisitDetails extends Component {
 //...
 render() {
 
 //...
   return() {
      <div>
         {/*pass to function EditVisit.js*/}
        <Link to={{pathname: `/visit/edit/${id}`, state: {data}}}>Edit</Link>
      <div>
   }
 }
}

Now I got function:

import React, { useState } from 'react';
import { useHistory } from "react-router-dom";

function EditVisit (data) {
  console.log(data.info)
 return(
   <div>
    Info: {data.info}
   <div>
 )
}

but data.info is no render (undefined).

What routing/navigation package are you using in your applicaion/code? Is EditVisit a react component, or really just simply a function that is invoked somewhere? Can you update your question to include how routing works in your app and what is rendering/invoking EditVisit? — Drew Reese
– Drew Reese, Commented Dec 1, 2020 at 7:56

Drew Reese · Accepted Answer · 2020-12-01 08:48:59Z

1

Use the useLocation react hook to access route state.

Given the route

<Link
  to={{
    pathname: `/visit/edit/${id}`,
    state: { data },
  }}
>
  Edit
</Link>

EditVisit

The route state can be accessed from location.state.data.

import React, { useState } from 'react';
import { useHistory, useLocation } from "react-router-dom";

function EditVisit (props) {
  const { state } = useLocation();
  return(
    <div>
     Info: {state.data}
    <div>
  )
}

Why not use `useHistory`?

History is mutable

The history object is mutable. Therefore it is recommended to access the location from the render props of <Route>, not from history.location. This ensures your assumptions about React are correct in lifecycle hooks.

answered Dec 1, 2020 at 8:48

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

4est Over a year ago

one more question: is save then to use history.push(/) ?

Drew Reese Over a year ago

@4est I don't quite understand that question.

Drew Reese Over a year ago

@4est If your question is about whether or not it is safe to use history.push, yes, that is the correct object to use for imperative navigation.

4est Over a year ago

yes, I want to use for navigation, thanks again

Hung Du · Accepted Answer · 2020-12-01 08:19:16Z

0

If you're using react-router, I think you should use the useHistory hook with location.state to capture the state in React function component. The below is the sample code.

import { useHistory } from 'react-router-dom'
function EditVisit () {
  const history = useHistory()
  const data = history.location.state
 return(
   <div>
    Info: {data.info}
   <div>
 )
}

You can read more at https://levelup.gitconnected.com/how-to-pass-additional-data-while-redirecting-to-different-route-f7bf5f95d48c

answered Dec 1, 2020 at 8:19

Hung Du

1221 silver badge4 bronze badges

3 Comments

4est Over a year ago

when after const data = history.location.state I did console.log I see data data: {user: "07M..3", info: "Test", VisitName: "Test2"...} but into return id did not want to display

4est Over a year ago

{data.data.info} and it's working, thanks for help

Drew Reese Over a year ago

@Peter It is better to link official docs as they are likely to be more accurate, but even the blog you linked to doesn't use the history object to access route state. History is mutable and react-router-dom recommends accessing state from the location object, as does the blog you linked out to.

Dmytro Portianka · Accepted Answer · 2020-12-01 09:29:13Z

0

in you case you can read it from props

const EditVisit = (props) => {
  const { location: {state: { date }} } = props // date is needed variable from state
  ....
}

screenshot from react-router documentation

answered Dec 1, 2020 at 9:29

Dmytro Portianka

214 bronze badges

Collectives™ on Stack Overflow

Pass data between class Component and function (React)

3 Answers 3

Why not use `useHistory`?

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Why not use useHistory?

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Why not use `useHistory`?