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
- Formatting React Stack Trace in the browser as a component?
- Minified component stack trace in create-react-app (dev mode)
- How to use stack trace to find where in the code error is?
Details
"react": "^18.2.0",
In a React functional component how can I get a trace on what parent called the child component?