Mapping object to child component in React - json

Question

Using React I am trying to pass down a parsed JSON file and map through the object. However seeing as it is an object I can only map the object using Object.keys as below:
const question = Object.keys(questions).map((data, index) =>
<QuestionList questions={data} key={index} />
However using this I am only able to access the top level of my data structure. So using this code and passing down my object. Using Object.keys() I can only access "questions" or "q1" or type, text, qId etc. I can not pass all object properties at once and specify what I need in a child component.
"questions": {
"q1": {
"qId": "1",
"type": "YN",
"text": "Text 1",
"tip": {
"logo": "assets/icons/gadgetz.svg",
"logofallback": "assets/img/gadgetz.png",
"heading": "Heading 1",
"text": "Text 2"
}
},...
What would be the easiest way to pass the whole object with child properties so I can use these in a child component? do I have to use something other than props?

Answer 1

const questionObjects = Object.values(JSON.stringify(theJSONinYourQuestion));
const questionComponents = questionObjects.map(question => <Question qId={question.qId} />);
Basically, use Object.values instead of Object.keys, and you've got a nice array of questions you can use.
Edit: if you don't have Object.values available in your environment (it is experimental)
const originalQuestions = JSON.stringify(theJSONinYourQuestion);
const questionKeys = Object.keys(orginalQuestions);
const questionObjects = questionKeys.map(key => originalQuestions[key]);
...

Answer 2

You can maintain access to the question object inside of a .map by assigning it to a variable outside that scope. Here's a jsBin showing the idea
const objectOfQuestions = {
"questions": {
"q1": {
"qId": "1",
"type": "YN",
"text": "Text 1",
"tip": {
"logo": "assets/icons/gadgetz.svg",
"logofallback": "assets/img/gadgetz.png",
"heading": "Heading 1",
"text": "Text 2"
}
},
"q2": {
"qId": "2",
"type": "YN",
"text": "Text 1",
"tip": {
"logo": "assets/icons/gadgetz.svg",
"logofallback": "assets/img/gadgetz.png",
"heading": "Heading 1",
"text": "Text 2"
}
}
}
}
const Question = ({ id, question }) => {
return (
<div>
<h1>Question: {id}</h1>
<p>id: {question.qId}</p>
<p>type: {question.type}</p>
<p>text: {question.type}</p>
</div>
)
}
const QuestionList = ({ questions }) => {
const questionObj = questions;
return (
<div>
{Object.keys(questions.questions).map((key, i) => {
return (
<div key={key}>
<Question id={key} question={questionObj.questions[key]} />
</div>
);
})}
</div>
);
}
ReactDOM.render(<QuestionList questions={objectOfQuestions} />, document.getElementById('app'));