In React How to pass object using history.push from a component to child component and read data

Question

I have parent component which showing records in table. When user click it redirect to child component with record Id passing in parameter using history push. This is all working fine but I need to pass an object of data in addition to parameter which I am not able to achieve and also what steps I need in child component to read this object?

Object Definition

export interface ISearchCriteriaForm{
  startTime: string,
  endTime: string,
  liveTime?: string,
  schedAction_Active: string,
  siteId?: number,
  scheduleId?: number
}

Parent Component

const MyComponentA = () => {

 const [url] = useState("/eziTracker/eziStatus");
const[eziSearchCriteria, setEziSearchCriteria] = useState<ISearchCriteriaForm>();

//when row clicked on table
const selectedRow = (row: any) => { 
//history.push(`${url}/${row.siteId}`);  // this works
 
 history.push({     // this is how I am trying to achieve ??
   pathname: `${url}/${row.siteId}`,
   state: eziStatusSearchCriteria
  });
 };

Child Component

const MyChildComponent = () =>{
  const match = useRouteMatch("/eziTracker/eziStatus/:id/:hash");
  const[eziStatusSearchCriteria, setEziStatusSearchCriteria] = useState<IEziStatusSearchCriteriaForm>();

  useEffect(() =>{
  
  },[]);

error

Expression expected.  TS1109

   88 |       pathname: `${url}/${row.siteId}`,
   89 |       state: eziStatusSearchCriteria
 > 90 |     });
      |     ^
   91 | };
   92 | 
   93 | const setDefaultSearchCriteria = () =>{

I think this is not an issue in typescript issue instead of rect.js error. I think you should assign { // this is how I am trying to achieve ?? pathname: ${url}/${row.siteId}, state: eziStatusSearchCriteria } state to variable and call it again in the history.push method as 2 statements. like, stackoverflow.com/questions/35821614/… — Vikum Dheemantha
– Vikum Dheemantha, Commented Jan 3, 2021 at 7:21
You are right, I have change the way I assign value to state and it did work, refer to my asnswer — K.Z
– K.Z, Commented Jan 3, 2021 at 7:31

Taghi Khavari · Accepted Answer · 2021-01-03 07:23:53Z

2

Usually you need to do something like this to achieve you're goal:

first you need to create a location object for history.push function like this:

const location = {
   pathname: `${url}/${row.siteId}`,
   state: eziStatusSearchCriteria || {}
}

and then use history.push(location) to go to your specified location and then in the destination all you need to do is to some how access location object which the easiest way is to use useLocation hook like this:

const location = useLocation();

//NOW you can use location.state object to get your data

answered Jan 3, 2021 at 7:23

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

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

1 Comment

Taghi Khavari Over a year ago

@Toxic Glad I could help ;)

K.Z · Accepted Answer · 2021-01-03 07:34:53Z

0

Parent component

const selectedRow = (row: any) => { 

eziSearchCriteria.siteId = row.siteId;

history.push({
  pathname: `${url}/${row.siteId}`,
  state: {searchCriteria: eziSearchCriteria}
});
};

Child Component

  let location = useLocation();

  const setSearchCriteria =() =>{
   if(location.state.searchCriteria!=null || location.state.searchCriteria !=''){
     setEziStatusSearchCriteria(location.state.searchCriteria)
   }
 }

answered Jan 3, 2021 at 7:34

K.Z

5,09527 gold badges120 silver badges268 bronze badges

Collectives™ on Stack Overflow

In React How to pass object using history.push from a component to child component and read data

Object Definition

Parent Component

Child Component

error

2 Answers 2

1 Comment

Parent component

Child Component

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Object Definition

Parent Component

Child Component

error

2 Answers 2

1 Comment

Parent component

Child Component

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related