таблица дерева в реакции

Question

введите описание изображения здесь

export type IPoseState = IPaginationBaseState & { projectId: number };

export class PoseForm extends React.Component<IPoseProps, IPoseState> {
state: IPoseState = {
     ...getSortState(this.props.location, ITEMS_PER_PAGE),
projectId: 0
};

componentDidMount() {
if (this.state.projectId > 0) {
debugger; this.props.getChildPoses(this.state.projectId, 0);
}
}

componentWillReceiveProps(nextprops) {
if (nextprops.projectId !== this.props.projectId) {
 debugger; this.props.getChildPoses(this.props.projectId, 0);
 }
}

sort = prop => () => {
this.setState(
  {
    order: this.state.order === 'asc' ? 'desc' : 'asc',
    sort: prop
  },
  () => this.sortEntities(this.props.projectId, '')
);
};

sortEntities(projectId, poseType) {
this.getEntities(projectId, poseType);
this.props.history.push(`${this.props.location.pathname}? 
page=${this.state.activePage}&sort=${this.state.sort},${this.state.order}`);
}

onSelect = event => {
this.getEntities(this.props.projectId, event.target.value);
};

getEntities = (projectId, poseType) => {
debugger; const { activePage, itemsPerPage, sort, order } = this.state;
this.props.getEntities(activePage - 1, itemsPerPage, `${sort},${order}`, { 
projectId, poseType });
};

deleteUnusedPoses = e => {
e.preventDefault();
alert(0);
this.props.deleteUnusedEntity();
};
debugger;
render() {
 const { poseList, match } = this.props;
  return (
   <div>
     <div className="table-responsive">
       <Table responsive>
         <tbody>
           {poseList.map((pose, i) => (
             <tr key={`entity-${i}`}>
               <td className="hand">
                 <FontAwesomeIcon icon={['far', 'plus-square']} />
               </td>
               <td>
                 <Button tag={Link} to={`${match.url}/${pose.id}`} 
color="link" size="sm">
                  {pose.id}
                </Button>
              </td>
              <td>{pose.poseCode}</td>
              <td>{pose.poseName}</td>
              <td>{pose.poseLevel}</td>
              <td>{pose.unit}</td>
              <td>{pose.project ? <Link to={`project/${pose.project.id}`}>{pose.project.projectName}</Link> : ''}</td>
              <td>{pose.pose ? <Link to={`pose/${pose.pose.id}`}>{pose.pose.poseName}</Link> : ''}</td>
              <td className="text-right">
                <div className="btn-group flex-btn-group-container">
                  <Button tag={Link} to={`${match.url}/${pose.id}`} color="info" size="sm">
                    <FontAwesomeIcon icon="eye" />{' '}
                    <span className="d-none d-md-inline">
                    </span>
                  </Button>
                  <Button tag={Link} to={`${match.url}/${pose.id}/edit`} color="primary" size="sm">
                    <FontAwesomeIcon icon="pencil-alt" />{' '}
                    <span className="d-none d-md-inline">
                    </span>
                  </Button>
                  <Button tag={Link} to={`${match.url}/${pose.id}/delete`} 
    color="danger" size="sm">
                    <FontAwesomeIcon icon="trash" />{' '}
                    <span className="d-none d-md-inline">
                      </span>
                    </Button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    </div>
  );
}
 }

const mapStateToProps = ({ pose, defaults }: IRootState) => ({
 poseList: pose.entities,
 totalItems: pose.totalItems,
projectId: defaults.projectId
});

const mapDispatchToProps = {
 getEntities,
 deleteUnusedEntity,
 getChildPoses
};

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(
mapStateToProps,
mapDispatchToProps
)(PoseForm);

Привет, ребята, я пытаюсь построить таблицу дерева, и poseList содержит все записи БД, которые вы можете увидеть на изображении, которое я записал в БД, и яхочу, когда я нажимаю Pose Code 5 (#) Pose Code 5.2 и Pose Code 5.2.1 childs будет отображаться / скрываться, или когда я нажимаю Pose Code 1 childs 1.1, 1.2, 1.3 show / hide.это возможно, если это, пожалуйста, скажите мне, как я могу это сделать.