How to return React element value in console?

Question

This seems so simple but I am having a hard time finding any relevant resources. I am on a website and see the following in the inspector:

I want to be able write some sort of jQuery expression that will return the array of id's under the "Products" key but can't figure out how to access the values within the created React element.

Would appreciate any help!

Answer 1

The React Devtools might help. It provides a view of the page similar to Chrome's built in 'Elements' view, but specific to React's component hierarchy.

If all you need to see is an array of IDs, you can inspect any component's props and state. If you need to do some kind of javascript manipulation, you can "export" a prop or state item as a global variable accessible in the console.

Answer 2

As i understand from your comments and question, you are looking for a way to debug your react component and display the data that being passed as props.

If this is correct, i advice you to use react developer tools.
This way you can inspect a component and see the state and props of it.

Here is an example from the website you posted: