How to handle recursive array mapping with React components?

Question

Here is a sample function called index() that I use to return an index of headers from a Markdown file. As you can see, with only 3 levels of headers, its quickly getting out of hand.

I tried a variety recursion ideas, but ultimately failed at all attempts to compile in create-react-app.

Could anyone offer any guidance as to how to clean this up and maybe even allow for an infinite/greater levels of nesting?

An array is stored in this.state.index which resembles the array below.

[
  {
    label: 'Header title',
    children: [
      {
        label: 'Sub-header title'
        children: [...]
      }
    ]
  }
]

Then that data is used in the function below to generate a ul index.

  index() {
    if ( this.state.index === undefined || !this.state.index.length )
      return;
    return (
      <ul className="docs--index">
        {
          this.state.index.map((elm,i=0) => {
            let key = i++;
            let anchor = '#'+elm.label.split(' ').join('_') + '--' + key;
            return (
              <li key={key}>
                <label><AnchorScroll href={anchor}>{elm.label}</AnchorScroll></label>
                <ul>
                  {
                    elm.children.map((child,k=0) => {
                      let key = i+'-'+k++;
                      let anchor = '#'+child.label.split(' ').join('_') + '--' + key;
                      return (
                        <li key={key}>
                          <label><AnchorScroll href={anchor}>{child.label}</AnchorScroll></label>
                            <ul>
                              {
                                child.children.map((grandchild,j=0) => {
                                  let key = i+'-'+k+'-'+j++;
                                  let anchor = '#'+grandchild.label.split(' ').join('_') + '--' + key;
                                  return (
                                    <li key={key}>
                                      <label><AnchorScroll href={anchor}>{grandchild.label}</AnchorScroll></label>
                                    </li>
                                  );
                                })
                              }
                            </ul>
                        </li>
                      );
                    })
                  }
                </ul>
              </li>
            );
          })
        }
      </ul>
    );
  }

Like I said, this is a mess! I'm new to React and coding in general so sorry if this is a silly question.

Have a look here

T30
– T30

2018-03-09 17:11:43 +00:00
Commented Mar 9, 2018 at 17:11 — T30
– T30, Commented Mar 9, 2018 at 17:11

Sagiv b.g · Accepted Answer · 2018-03-22 16:30:07Z

Seems like you want a recursive call of a component.
For example, component Item will render it self based on a condition (existence of the children array).

Running example:

const data = [
  {
    label: 'Header title',
    children: [
      {
        label: 'Sub-header title',
        children: [
          { label: '3rd level #1' },
          {
            label: '3rd level #2',
            children: [
              { label: 'Level 4' }
            ]
          }
        ]
      }
    ]
  }
]

class Item extends React.Component {
  render() {
    const { label, children } = this.props;
    return (
      <div>
        <div>{label}</div>
        <div style={{margin: '5px 25px'}}>
          {children && children.map((item, index) => <Item key={index} {...item} />)}
        </div>
      </div>
    )
  }
}

const App = () => (
  <div>
    {data.map((item, index) => <Item key={index} {...item} />)}
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Edit

Just for completeness, i added another example but this time we handle the isOpen property outside the Item's local component state, in a higher level.
This can be easily moved to a redux reducer or any other state management library, or just let a higher level component like the App in this case manage the changes.

So, to handle changes of a recursive component you would probably write a recursive handler:

const data = [
  {
    label: 'Header title',
    id: 1,
    children: [
      {
        label: 'Sub-header title',
        id: 2,
        children: [
          { label: '3rd level #1', id: 3 },
          {
            label: '3rd level #2',
            id: 4,
            children: [
              { label: 'Level 4', id: 5 }
            ]
          }
        ]
      },
    ]
  },
  {
    label: 'Header #2',
    id: 6,
    children: [
      { label: '2nd level #1', id: 7, },
      {
        label: '2nd level #2',
        id: 8,
        children: [
          { label: 'Level 3', id: 9 }
        ]
      }
    ]
  }
]

class Item extends React.Component {

  toggleOpen = e => {
    e.preventDefault();
    e.stopPropagation();
    const {onClick, id} = this.props;
    onClick(id);
  };

  render() {
    const { label, children, isOpen, onClick } = this.props;
    return (
      <div className="item">
        <div
          className={`${children && "clickable"}`}
          onClick={children && this.toggleOpen}
        >
          <div
            className={`
            title-icon
            ${isOpen && " open"}
            ${children && "has-children"}
            `}
          />
          <div className="title">{label}</div>
        </div>
        <div className="children">
          {children &&
            isOpen &&
            children.map((item, index) => <Item key={index} {...item} onClick={onClick} />)}
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    items: data
  };

  toggleItem = (items, id) => {
    const nextState = items.map(item => {
      if (item.id !== id) {
        if (item.children) {
          return {
            ...item,
            children: this.toggleItem(item.children, id)
          };
        }
        return item;
      }
      return {
        ...item,
        isOpen: !item.isOpen
      };
    });
    return nextState;
  };

  onItemClick = id => {
    this.setState(prev => {
      const nextState = this.toggleItem(prev.items, id);
      return {
        items: nextState
      };
    });
  };

  render() {
    const { items } = this.state;
    return (
      <div>
        {items.map((item, index) => (
          <Item key={index} {...item} onClick={this.onItemClick} />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

.item {
  padding: 0 5px;
}

.title-icon {
  display: inline-block;
  margin: 0 10px;
}

.title-icon::before {
  margin: 12px 0;
  content: "\2219";
}

.title-icon.has-children::before {
  content: "\25B6";
}

.title-icon.open::before {
  content: "\25E2";
}

.title-icon:not(.has-children)::before {
  content: "\2219";
}

.title {
  display: inline-block;
  margin: 5px 0;
}

.clickable {
  cursor: pointer;
  user-select: none;
}

.open {
  color: green;
}

.children {
  margin: 0 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Hi, the above same example is it possible to next next pages like HeaderTitle is one page while click on HeaderTitle it navigatet to Header#2 page and while click this it will navigate to next page... In single page we need to pass the parameter only different. is it possible to do this?. If you know can you please help me?..
@user sorry but i didn't understand the question. I believe this should be asked as a separate question with code example etc..
please check here i posted my question stackoverflow.com/questions/59170951/…

Chase DeAnda · Accepted Answer · 2018-03-09 17:36:44Z

I don't have good test data, but try this out:

index() {
    if ( this.state.index === undefined || !this.state.index.length ) {
        return null;
    }

    const sections = this.state.index.map(this.handleMap);

    return (
        <ul>
            {sections}
        </ul>
    )

}

handleMap(elm, i) {
    const anchor = '#'+elm.label.split(' ').join('_') + '--' + i;
    return (
        <li key={i}>
            <label><AnchorScroll href={anchor}>{elm.label}</AnchorScroll></label>
            <ul>
                {
                    elm.children.map(this.handleMapChildren)
                }
            </ul>
        </li>
    );
}

handleMapChildren(child, i) {
    let anchor = '#'+child.label.split(' ').join('_') + '--' + i;
    return (
        <li key={i}>
            <label><AnchorScroll href={anchor}>{child.label}</AnchorScroll></label>
            <ul>
                {
                    child.children.map(this.handleMapChildren)
                }
            </ul>
        </li>
    );
}

Collectives™ on Stack Overflow

How to handle recursive array mapping with React components?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related