ReactJS access JSON object passed from other component - json

Question

I'm new with ReactJs and have this question which right now I find it a bit hard to understand.
I have a component which does a call to retrieve XML object, this XML object is later parsed to JSON object and after passed to other component in order to do some sorting to it.
Right now i'm stuck and unable to access properly the JSON on my second component.
And when I'm trying to do this.props.files.map - it says that map is undefined.
this is the parent component render method where I pass the properties:
render() {
return (
<div>
<List files={this.convertToJson()}/>
</div>
)
}
the JSON that I receive looks like this:
[ {
"$": {
"date": "",
"description": "",
"name": "",
"size": "107829",
"type": "pdf"
}
}, {
"$": {
"date": "",
"description": "",
"name": "",
"size": "682015",
"type": "pdf"
}
}
]
How should I write my second component to get access to this JSON data and later show all properties, i would like to iterate over it and have access to all properties.
this.props.files.map(function($) {
return <li key={$}>{$}</li>
})
this gives me an error with files.map is undefined.
i'm pretty new with this so all help would be useful.
here is the code for this.convertToJson() as requested, if I console log it - it looks like the JSON above.
convertToJson = () => {
return JSON.stringify(this.state.data)

Answer 1

I think the issue might actually be with this.convertToJson()
You need to parse the JSON object into a Javascript object in order to iterate over it in the way you are suggesting.
Check out this example it seems to work correctly.
// This is just mocking your JSON object
const json = JSON.stringify([{
"$": {
"date": "",
"description": "",
"name": "",
"size": "107829",
"type": "pdf"
}
}, {
"$": {
"date": "",
"description": "",
"name": "",
"size": "682015",
"type": "pdf"
}
}
]);
// This is what you care about
const obj = JSON.parse(json);
obj.map(o => {
// You need to get o.$ to get the actual object
console.log(o.$)
});
also in order to pass a component all of the objects properties as props you'll probably need the spread operator <li {...o.$}>{$}</li>
Hope this helps