Using React 18, how do I get reference to JSX created component so I can call setState()?

Question

I'm new to React.

In root.render I instantiate my ProjectGrid (class-based component) with code something like the following:

root.render(
  <StrictMode>
    <App />
    <ProjectGrid project={p} />
  </StrictMode>
);

Basically, the ProjectGrid component displays the Project object -- simple user-defined type.

Later, in a Button onClick, I'd like to generate a new Project and update the state of the ProjectGrid so it will now display the new Project object.

How do I get a reference to the JSX-created React component?

Thought This Would Work: But Returns DOM Element

I thought it would be something like the following:

let px = document.querySelector('#ProjectGrid');
let pg = ReactDOM.findDOMNode(px);
    if (pg !== undefined && pg !== null) {
       pg.setState({ project: p });
    }

However, this doesn't work because the px object is actually a DOM element not a React Component.

Why would you like to do that in the first place? It's not how you write things in react. — Konrad, Oct 02 '22 at 15:42
Explain the alternative then. Mine is a question. yours would be an answer. But instead you've posed a question about the question. Plus, the question is detailed. I don't mind if you answer by saying this is not done in React. That's fine, but please explain the alternative or point me to a definitive answer. — raddevus, Oct 02 '22 at 15:43
You should use props to pass data between components. Or context if there are multiple nestings. — Konrad, Oct 02 '22 at 15:44
How do I get a reference to the two components? So I can pass props between them? — raddevus, Oct 02 '22 at 15:45
Check out the docs here https://beta.reactjs.org/learn/state-a-components-memory. You'll want a component that keeps track of the state and passes a setter down to the child component with the button (if necessary), as well as the state itself down to the ProjectGrid. If the button is within ProjectGrid, then you can just keep track of the state in there. — M-N, Oct 02 '22 at 15:45
That link is a lot of reading. I'm actually reading the book, React: Up & Running (https://amzn.to/3e2hQm3) which is was just published in 2022 (not old) but React 18 has changed things so much - right after book was published. React is not intuitive & I can see why people don't like it in the beginning. So now I'll just finish the book before I ever ask a question about React again. — raddevus, Oct 02 '22 at 15:51
I wonder what the first part of the answer would've been?? ... how do I get reference to JSX created component? Can you get a ref to a React component? — raddevus, Oct 02 '22 at 16:00
Your question would still work the same in basically all versions of React. Nothing about React 18 would change the approach to this problem. The core issue is that you are not approaching the problem in a very React-y way. Components should not know about each other except insofar as they render them as children. The way you update a parent component's state is by passing down a setState function as a prop. And the way you update a sibling component is by letting the parent component control the state, passing the state down one component tree (as a prop) and the setState down the other. — M-N, Oct 02 '22 at 19:20

score 0 · Answer 1 · answered Oct 02 '22 at 15:51

You can use Redux to use state across multiple components. Alternatively, you can use useImperativeHandle to call the child method from the parent. To update the child's state you should use props. Using useEffect on props change you can update the state.

Check out reference of useImperativeHandle Call child method from parent

score -1 · Accepted Answer · answered Oct 02 '22 at 22:32

-1

Here's how it is explained in the book, React: Up & Running by Stoyan Stefanov (O'Reilly Media publishers).

However, in ReactJS version 18.x you will get an error on this which looks like:

You can see that even the author shows updating the value using the reference to the component (myTextAreaCounter) and the setState() function:

answered Oct 02 '22 at 22:32

raddevus

8,142
7
66
87

Use a callback ref: https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react. But I would emphasize that accessing react instance methods imperatively from outside your app is an anti pattern and should only be done in special circumstances (as suggested even by the quote you included here) – M-N Oct 02 '22 at 23:42

Using React 18, how do I get reference to JSX created component so I can call setState()?

2 Answers2