React JS - how to read specific attribute from a child JSX before mounting it to the DOM

Question

What I need to achieve is to handle a specific attribute from one JSX component that I import to its parent component in a way that I will display here.

Child component returns JSX with 'someId' attribute:

return <h1 someId={123}>{title}</h1>

And the parent assigns this JSX to a variable and then needs to read this 'someId' attribute from it - before mounting the variable to the DOM:

let mySpecialChild = <Child title="Hello boys and girls!" />
let mySpecialChildId = mySpecialChild.someId

mySpecialChild.someId is now empty. I know it looks strange and against ReactJS rules but I need this for a very specific use case (in a loop, with additional conditions related to this child attribute). Here I created a sandbox for tests:

https://codesandbox.io/s/small-wood-jx33sz?file=/src/App.js

Answer 1

You should set a state on the parent component. codesandbox

1. Define a state which holds the id in the parent component.
2. Pass the function that sets the state (setSomeId) to the child component from the parent component.
3. Call setState function(setSomeId) when you want.
4. The state of parent component will update, so it will rerender with the new value of someId.

Edit:

Notice that the state setter function you pass will not change during renders. React docs state that:

React guarantees that setState function identity is stable and won’t change on re-renders.

There other ways for doing what you want:

2. useImperativeHandle: If you want to read the child id imperatively, you can pass a ref to the child component from the parent component and use useImperativeHandle hook inside the child component. You can call ref.current?.getId function from the parent component. Notice that if you want to display the id in the parent component, the parent component should be rerendered. So you will see the child id when you press the button that updates the state, and rerenders the parent component. codesandbox

3. Ref callback: If you don't need to render the value of someId from the child component and you want to call a function whenever the child id changes, you can pass a ref callback from the parent component to the child component. The callback gets called whenever the node is changed. You can access the property you want from the callback. If you want to render someId on the screen, you have to render the parent component. So you should set its value to state. (I changed someId to data-some-id because someId is not a valid prop on a DOM element. codesandbox.

Answer 2

You can work around this issue by not using JSX to render that component, but directly calling it.

Disclaimer: You should not be using this approach.

If you want the returned DOM representation directly, you will have to call the Child component as a function instead of a JSX.

So if instead of
let mySpecialChild = <Child title="Hello boys and girls!" />
you do
let mySpecialChild = Child({title:"Hello boys and girls!"}),

then you can do let mySpecialChildId = mySpecialChild.props.someId;

Updated demo at: https://codesandbox.io/s/nameless-feather-fwdhs4

Answer 3

You can access props as:

CODESANDBOX LINK

let mySpecialChild = <Child title="Hello boys and girls!" />;
console.log(mySpecialChild.props.title);

when you console.log mySpecialChild then It will log as: