Full-Stack React Projects - Second Edition

Iterating and rendering the object details form

We will add the form interface seen in the previous section with Material-UI ExpansionPanel components to create a modifiable list of VR objects for each type of VR object array in the given game.

Inside the nested ExpansionPanelDetails component, we will iterate through the answerObjects array or the wrongObjects array to render a VRObjectForm component for each VR object, as shown in the following code:

mern-vrgame/client/game/GameForm.js:

<ExpansionPanel>    <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>        <Typography>VR Objects to collect</Typography>    </ExpansionPanelSummary>    <ExpansionPanelDetails> {        game.answerObjects.map((item, i) => {          return <div key={i}> <VRObjectForm index={i} ...