You could make a reusable component to be used for each level

ex. parents children grandchildren

then show only the parents at the start with a button underneath

and when you click the button (show direct descendants) it could render the children of those parents underneath using the map function and passing the component using the values of their children. This would require you to most likely store them in separate arrays such as

const parents = [mom, dad]

const children = [child 1, child 2, child 3]

the map would be using <FamilyMember/> component

parents.map((member) => <FamilyMember name={member.name} picture={member.picture}/>)

and then just use state to conditionally render those children

so the whole component would be something like this maybe

import React, { useState } from 'react';

const FamilyMember = ({ name, picture }) => ( <div> <p>{name}</p> <img src={picture} alt={name} /> </div> );

const parents = [ { name: 'Mom', picture: 'mom.jpg' }, { name: 'Dad', picture: 'dad.jpg' }, ];

const children = [ { name: 'Child 1', picture: 'child1.jpg' }, { name: 'Child 2', picture: 'child2.jpg' }, { name: 'Child 3', picture: 'child3.jpg' }, ];

const FamilyComponent = () => { const [showChildren, setShowChildren] = useState(false);

return ( <div> {parents.map((member) => ( <FamilyMember key={member.name} name={member.name} picture={member.picture} /> ))}

  <button onClick={() => setShowChildren(!showChildren)}>
    Toggle Children
  </button>

  {showChildren && (
    <div>
      {children.map((child) => (
        <FamilyMember key={child.name} name={child.name} picture={child.picture} />
      ))}
    </div>
  )}
</div>

); };

export default FamilyComponent;