0

I am trying to figure out how to grab the state from a 3rd party component (which will be an array of objects) and use it to update the state in the parent component so I can access the data and do other stuff with it.

Since the child component is third party I can not modify it and add any kind of change handler to it to pass state up.

How can I achieve this?

chazsolo
  • 7,873
  • 1
  • 20
  • 44
reactFullStackDeveloper
  • 829
  • 2
  • 15
  • 32
  • Have you considered using `document.querySelector` and get value? – Rikin Dec 13 '18 at 23:54
  • @Rikin - I did give some thought to somehow watching if the dom changes but I don't think this would work. The state is an array of objects in a table, not just a single value. Am I wrong in thinking this wouldn't work? – reactFullStackDeveloper Dec 14 '18 at 00:00
  • If you are saying state from 3rd party component, is the state exposed somehow? If so are you able to read using `window.`. If not do they accept any function as call back which will then notify you once its loaded? React state is internal and not exposed. – Rikin Dec 14 '18 at 00:02
  • @Rikin - I'm not exactly sure what you mean by 'is the state exposed' - I know it exists because of the React dev tools. As far as I know, there aren't any hooks or methods to that would notify me when a state has been updated. There really isn't any documentation - the component is coming from a work artifactory and is so heavily ingrained in an existing project that I need to find a way to work with it for now if possible. – reactFullStackDeveloper Dec 14 '18 at 00:07
  • Check this: https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs – Pommesloch Dec 14 '18 at 00:08
  • @Pommeslock - thanks for suggestion, however, this involves being able to add a change handler to the child component which I mention in the OP I can not modify. – reactFullStackDeveloper Dec 14 '18 at 00:10
  • https://stackoverflow.com/a/29303324/9636451 – Joss Classey Dec 14 '18 at 00:14
  • @rralbritton you cant access state of child's component rather you can access rendered element using document.querySelector which I think would be the only way and then get your desired values from it. React state is internal to component more like `private` inside component scope – Rikin Dec 14 '18 at 01:40
  • @Rikin Have you seen the link I posted? – Joss Classey Dec 14 '18 at 10:59
  • @Joss - thanks I'm going to take a look at this now - looks promising – reactFullStackDeveloper Dec 14 '18 at 15:18
  • @Joss - I'm trying to implement this and keep failing. I've also referenced [this post](https://www.leighhalliday.com/using-refs-in-react) currently, I'm getting an error `TypeError: Cannot read property 'state' of undefined` On my 3rd party table I have ` {this.LoanTable = Table;}} .../>` And then in componentDidMount I have `this.setState = {filteredData: this.LoanTable.state.filterList}`
     – reactFullStackDeveloper Dec 14 '18 at 16:05
  • I'm not sure if it will make any difference, but try removing the curly braces when defining the ref prop, ` this.LoanTable = Table} .../>`. If that doesn't work, please put your code into https://codesandbox.io/
     – Joss Classey Dec 14 '18 at 16:41
  • @Joss - That didn't work. This is a huge project with React imbedded in a much larger Java application and uses a Java backend. Getting it to funciton in the codebox just won't work here but I did post the entire component in there to help give persepective. The llines you probably care about is line 107 where state is being updated and line 155 where the ref is created on the Child. I hope this helps some. https://codesandbox.io/s/7j2ml8m780 – reactFullStackDeveloper Dec 14 '18 at 17:01
  • What is output if you put `console.log(this.LoanTable)` at the top of `componentDidMount()`? – Joss Classey Dec 14 '18 at 17:10
  • Also I recommend changing the way you setup the ref using instead `innerRef` prop and `React.createRef()` https://www.ludofischer.com/blog/react-16-3-createref/ – Joss Classey Dec 14 '18 at 17:18
  • @JossClassey - undefined - The other article I read state createRef was at 16.7 - this one says 16.3 so I'll give it a try - thanks – reactFullStackDeveloper Dec 14 '18 at 17:18
  • @JossClassey - Ok so I started getting past errors by implementing createRef() - now my issue is if I log this.LoanTable.current its constantly null. I did read a post where react-dom needed to also be at least 16.3 - and mine is as well. – reactFullStackDeveloper Dec 14 '18 at 17:55
  • Good, that's progress. Is `
    ` mounted when you try to access `this.LoanTable`?     – Joss Classey Dec 14 '18 at 18:10
  • @JossClassey - OK - I think I got it! - my console statement is still null. The console statement is at the very end of componentDidMount. However, [I found this example](https://codesandbox.io/s/7y1wzn2w96) from a reddit thread and implemented in my code as a test - so I now have a method called getState that simply logs `this.LoanTable.current` and `this.LoanTable.current.state` I then created a button at the top of the render statement and onClick implements getState() and it works which is wonderful! Thank you so much! Is there anyway I can mark your answer correct? – reactFullStackDeveloper Dec 14 '18 at 18:22
  • Hey glad it works! I added an obligatory answer to this question so you can mark it as answered :) – Joss Classey Dec 14 '18 at 18:35

1 Answers1

0

This answer has the basic idea, although you'll want to use innerRef and React.createRef(). And as you mentioned, the current state can be grabbed using this.insertRefHere.current.state.

Joss Classey
  • 1,054
  • 1
  • 7
  • 22