Iterating through an arrary which is nested in an object which is nested in an array React

Looking for some help with a problem I’m having regarding react. I need to iterate through the array ItemTypes which is nested in each object which are all nested within the useState array. I’ve tried using a for loop but I’m not sure where I’d put it. Any help or a nudge in the right direction would be greatly appreciated.

Cheers!

import React, { useState } from 'react';
import './StudentProjectLib.css'
import SideBarCheckbox from './checkboxSideBar'


function ProjectSideBar() {

    const [checkboxes, setCheckboxes  ] = useState([

        { title: 'Subscription', itemTypes: ['Free', 'Premium'], id:1 },
        { title: 'Activity Type', itemTypes: ['Animation', 'Game', 'Chatbot', 'Augmented Reality'], id: 2 },
        { title: 'Year Level', itemTypes: ['1-4', '5-6', '7-8', '9-13'], id:3 },
        { title: 'Subject Matter', itemTypes: ['Computer Science', 'Maths', 'Science', 'Language', 'Art', 'Music'], id:4 },

    ])
        
    return (
        <div>
            {checkboxes.map((checkbox) => (
                <div className='ProjectSideBar'>
                    <h1 className= 'TableHeader'>{checkbox.title}</h1>
                   <div>
                    <SideBarCheckbox className = 'CheckBoxContainer'/>{checkbox.itemTypes}
                    </div>
                    
                </div>    
                
            )
                
                
            )}

        </div>
    )}


export default ProjectSideBar;

Answer

If I’m understanding your question correctly you just need to use .map() again.

return (
  <div>
    {checkboxes.map((checkbox) => (
      <div className='ProjectSideBar'>
          <h1 className= 'TableHeader'>{checkbox.title}</h1>
          <div>
          <SideBarCheckbox className = 'CheckBoxContainer'/>
          {checkbox.itemTypes.map((item) => (
            <span>{item}</span> // Or whatever you want to do with item
          )}
          </div>
          
      </div>    
    )}
  </div>
)}