0

I'm building a reactjs website that has tabs implemented based on ReactJS. I need to group a collection of items/articles based on a tabIndex(3 groups) and show them as a view in ReactJS using react-tabs. I had an earlier code that worked wherein, the collection was an object with 3 (tab) group-articles added into the object. However, this isn't working when I dynamically add an article. So, I now am using a single collection of all articles, and need to group based on tabIndex. Each artcile has properties - id, tabIndex/tabName, title, text.

Please lend me help. The following is the code snippet:

return this.state.articles.map(tabArticles => {
      return (
        <TabPanel>
          {tabArticles.map(
            article => (
              <div>
                <br />
                  <p className="option__text">
                    <Link to={`article/${article['id']}`}>{article['title']}</Link>
                  </p>
                  <p className="option__text">{(article['text']).substring(0, 20) + "..."}</p>
                  <br/>
              </div>
            )
          )}
        </TabPanel>
      )});
<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>
Nishanth Reddy
  • 589
  • 2
  • 14
  • 27

1 Answers1

0

I used 'filter' in javascript, and the code worked for me.

Nishanth Reddy
  • 589
  • 2
  • 14
  • 27