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

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Iterating through an arrary which is nested in an object which is nested in an array React without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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>
)}
We are here to answer your question about Iterating through an arrary which is nested in an object which is nested in an array React - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji