He creado una matriz de objetos de la forma

 const objectOne = { name: 'NameOne', data: [{x: 'dataOneX', y: 'dataOneY'},{x: 'dataTwoX', y: 'dataTwoY'}] }; const objectTwo = { name: 'NameOne', data: [{x: 'dataOneX', y: 'dataOneY'},{x: 'dataTwoX', y: 'dataTwoY'}] }; const newArr: [objectOne, objectTwo]

Luego paso newArr a un componente como accesorio:

 < LineChart title='title' data={newArr} />

Dentro del componente, intento lo siguiente: console.log(data) y obtengo mi matriz en la consola. Sin embargo, console.log(data[0].name) devuelve undefined y data[0] devuelve el nombre del objeto original que pasé. Estoy tratando de acceder a los datos de esta manera para poder probar dinámicamente extrayendo de una API y pasar la información a apexcharts. Sin embargo, este es un obstáculo difícil para mí: soy nuevo en JS (y react.js, que es lo que estoy usando).

Feliz de aclarar!

EDITAR:

Mi código real es:

 const components = [ { title: 'Headcount', data: [{ objectOne }, { objectTwo }] } ] <LineChart title="Title" xtype="category" data={components[0].data} />

Y lo siguiente es a lo que se pasa:

 function LineChart({ title, data }) { console.log(data); data.forEach((datum) => console.log(datum.name)); return( <Box> <Typography>{title}</Typography> </Box> )); } export default LineChart;

El problema que tengo es data.forEach((datum) => console.log(datum.name)) devuelve indefinido pero los datos son exactamente como los espero en la consola.