1

Looking to debug a parent and child component, given the example of:

Parent:

import React from 'react';
import PropTypes from 'prop-types';

// Child Component
import Bar from './Bar'

const Foo =  (props) => {
  // removed code
  return <Bar data={data} />
}

Foo.propTypes = {
  // code
};

Foo.defaultProps = {
  // code
};

export default Foo;

Child:

import React from 'react';
import PropTypes from 'prop-types';

const Bar =  ({data}) => {
  const stack = React["__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED"].ReactDebugCurrentFrame.getCurrentStack()
  console.log('stack', stack)
}

Bar.propTypes = {
  // code
};

Bar.defaultProps = {
  // code
};

export default Bar;

it doesn't log me the Parent Component name or any info.

Research

Details

"react": "^18.2.0",

In a React functional component how can I get a trace on what parent called the child component?

DᴀʀᴛʜVᴀᴅᴇʀ
  • 7,681
  • 17
  • 73
  • 127
  • Does `console.trace()` not log the parent component? – Live bug help - www.dialect.so Jan 06 '23 at 15:43
  • `console.trace()` is giving me the details of the child component and all I need is the component name of the parent component. No where in the trace am I seeing the parent details. – DᴀʀᴛʜVᴀᴅᴇʀ Jan 06 '23 at 15:47
  • If you're only looking for the React tree in a particular state of your app for debugging purposes, the [React dev tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) have a "components" tab which shows an interactive tree, with all the current state and props. – Emile Bergeron Jan 06 '23 at 18:58
  • And if the state you're trying to debug is happening too quickly to have a good look at the tree, you could probably add a `debugger` line in your child component to pause the execution. – Emile Bergeron Jan 06 '23 at 18:59

0 Answers0