Los componentes de React toman un objeto como primer argumento: los accesorios. Cuando usa jsx, los atributos que pasa se convierten en un objeto.

 <Component name="test" id={42} ok={true} /> // props = { name: "test", id: 42, ok: true }

Luego, su componente recibe los accesorios de esta manera:

 const Component = (props) => { console.log(props.name) // => "test" // the rest of your component... } // Most people will use destructuration to use directly the attribute name const Component = ({ name, id, ok }) => { console.log(name) // => "test" // the rest of your component... }

El operador de propagación le permite completar atributos para cada propiedad de un objeto

 const data = { name: "test", id: 42, ok: true } <Component {...data} /> // is the same as : <Component name={data.name} id={data.id} ok={data.ok} />

En su caso, cuando pasa itemsProp={data} , en realidad tiene el primer argumento de su componente como este

 const RecursiveComponent = (itemsProp) => { // here itemsProp = { itemsProp : { name : "Level 1", children : [...] }} // so you have to use it this way const hasData = itemsProp.itemsProp.children && itemsProp.itemsProp.children.length; }

puede usarlo con accesorios de paso <RecursiveComponent itemProps={data} /> también, vea a continuación, observe la llave {} en accesorios mientras obtiene accesorios en el componente de función.

Manera diferente 1:-

 const RecursiveComponent = (props) => { const hasData = props.itemProps.children && props.itemProps.children.length }

puedes usar como arriba también.

Solución 2:-

 import React from "react"; const data = { name: "Level 1", children: [ { name: "Level 2", children: [ { name: "Level 3" } ] }, { name: "Level 2.2", children: [ { name: "Level 3.2" } ] } ] }; const RecursiveComponent = ({itemProps}) => { console.log("itemsprops", itemProps); const hasData = itemProps.children && itemProps.children.length; return ( <> {itemProps.name} {hasData && itemProps.children.map((child) => { console.log(child); return <RecursiveComponent itemProps={child} key={child.name} /> })} </> ); }; function App() { return ( <div className="App"> <RecursiveComponent itemProps={data} /> </div> ); } export default App;