javascript - How to make menu hierarchy flowchart in ReactJS or HTML/CSS

Question

Hey, I am working on a side project in which I am want to develop react component which can render details on the top bar with text and two buttons and at the bottom, a hierarchy styled like a menu flowchart. each menu option will expand further when the plus sign is clicked and collapse when the minus sign is clicked.

I am a beginner in reactjs, I don't know how to render such components, can you help me here?

If you have any question please comment below and thanks in advance.

Answer 1

Disclaimer. When people asked in the comments "what you have tried so far?", they except to help your on resolving some issue, and not "making it for you". Make sure to try something, before blindly asking.

You don't need libraries to make it (from your current version of the question). All you need to do, it's implement Composite pattern of the Component. Very simple example:

export class FlowItem extends React.Component {

   render() {
      const {header, children} = this.props;

      return (
         <div>
             Ping from {header}
             <div style={{marginLeft: '20px'}}>
                 {children}
             <div/>

         <div/>
      );
   }
}

And it's usage example below.

export class Content extends React.Component {

   render() {

      return (
         <div
            <FlowItem 
              header={"Very Top 1"}>
                  <FlowItem 
                     header={"Parent 1"}>
                  <FlowItem/>
            <FlowItem/>


            <FlowItem 
              header={"Very Top 2"}>
                  <FlowItem 
                     header={"Parent 1"}>
                  <FlowItem/>

                  <FlowItem 
                     header={"Parent 2"}>
                      <FlowItem header={"Child 1"}/>
                      <FlowItem header={"Child 2"}/>
                  <FlowItem/>

                  <FlowItem 
                     header={"Parent 3"}>
                  <FlowItem/>
            <FlowItem/>

         <div/>
      );
   }
}

Another simple example if you want to use with real objects in the array. I think it's your case from the question:

export class Content extends React.Component {

   render() {

      const root = {
       header: "Root 1",
       children: [
       {
        header: "Parent 1",
        children: [
         {
           header: "Child 1",
           children: [
            {
              header: "Inner 1",
              children: null
            }
           ]
         },
         {
           header: "Child 2",
           children: null
         }, 
         {
           header: "Child 3",
           children: null
         }
        ]
       },

       {
        header: "Parent 2",
        children: [
         {
           header: "Child 1",
           children: null
         },
         {
           header: "Child 2",
           children: null
         }
        ]
       },
      ]};

      return (
         <div>
            {this.getItemView(root)}
         <div/>
      );
   }

   getItemView = (node) => {
        return (
           <FlowItem 
             header={node.header}>
             {node.children ?
                node.children.map((obj, idx) => {
                  
                return (this.getItemView(obj));
           
             }) : <div/>}
           <FlowItem/>
        );
   };
}