I need to examine all the elements within the following layout of React Native app:
const App: () => Node = () => {
return (
<Debugger>
<SafeAreaView style={styles.body}>
<ScrollView>
<BreadcrumbItem></BreadcrumbItem>
<TextInput
value={v}
onChangeText={(v) => setV(v)}
/>
... code omitted
The BreadcrumbItem represents the following structure
function BreadcrumbItem() {
return (
<View>
<Button title="Press me" onPress={this.onPress} style={styles.btn}/>
</View>
);
}
I have access to the children that are under the Debugger element. However, I cannot dive into the BreadcrumbItem to access the View and Button elements because the props.children of the BreadcrumbItem is "undefined". Here is a short implementation of the Debugger component:
const Debugger = ({ children }) => {
const traverseReactTree = (node) => {
if (React.isValidElement(node)) {
// // Here is where the issue arises: the `props.children` property of BreadcrumbItem` is undefined.
if (node.props.children) {
// code omitted
const updatedChildren = traverseReactTree(child);
return updatedChildren
}
return node;
}
const updatedChildren = traverseReactTree(children);
return updatedChildren;
}
Of course, I can wrap the content of BreadcrumbItem with Debugger, but this does not meet my requirements.
Any advice would be appreciated.