How can I assign unique and linear key for each object within an array that's in an object within another array?

Question

The dataset that I'm working with is structured like this:

After running my code, I'm getting this result:

But I need the objects' keys in the "Dessert" to be 3, 4, 5 instead of relooping from 0 after the first iteration.

My current code looks like this (sorry for the indentation- it's acting weird):

 const groupSource = [ { title: 'Fruits', group: [ {text: 'apple'}, {text: 'banana'}, {text: 'grapefruit'} ], }, { title: 'Desserts', group: [ {text: 'icecream', color: 'orange'}, {text: 'chocolate'}, {text: 'chips'} ], } ]; class ResultCategory extends React.Component{ render(){ return( <div> {this.props.text} </div> ); } } class Result extends React.Component{ render(){ return( <table> <tbody> <tr><td>Name:</td><td> {this.props.text} </td></tr> <tr><td>Key:</td><td> {this.props.keyz} </td></tr> </tbody> </table> ); } } class Search extends React.Component{ render(){ var database = this.props.database; var ResultsDisplay = database.map((object, index) => { return( <div> <div className="Category"> <ResultCategory text={object.title} /> </div> {object.group.map((item, index)=>{ return( <li className="results" onClick={this.onClick}> <Result text={item.text} keyz={index} /> </li> ); })} </div> ); }); return( <div> {ResultsDisplay} </div> ); } } ReactDOM.render( <Search database={groupSource} />, document.getElementById('container') ); 

 *{ font-family: Helvetica; font-weight: 100; } li{ list-style: none; } .Category{ margin-top: 20px; margin-bottom: 5px; } 

 <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="container"> <!-- This element's contents will be replaced with your component. --> </div> 

Thanks in advance!

Answer 1

The container component (Search) can track the index counting you want.

 const groupSource = [ { title: 'Fruits', group: [ {text: 'apple'}, {text: 'banana'}, {text: 'grapefruit'} ], }, { title: 'Desserts', group: [ {text: 'icecream', color: 'orange'}, {text: 'chocolate'}, {text: 'chips'} ], } ]; class ResultCategory extends React.Component{ render(){ return( <div> {this.props.text} </div> ); } } class Result extends React.Component{ render(){ return( <table> <tbody> <tr><td>Name:</td><td> {this.props.text} </td></tr> <tr><td>Key:</td><td> {this.props.keyz} </td></tr> </tbody> </table> ); } } class Search extends React.Component{ render(){ var database = this.props.database; var totalIndex = 0; var ResultsDisplay = database.map((object, index) => { return( <div> <div className="Category"> <ResultCategory text={object.title} /> </div> {object.group.map((item, index)=>{ return( <li className="results" onClick={this.onClick}> <Result text={item.text} keyz={totalIndex++} /> </li> ); })} </div> ); }); return( <div> {ResultsDisplay} </div> ); } } ReactDOM.render( <Search database={groupSource} />, document.getElementById('container') ); 

 *{ font-family: Helvetica; font-weight: 100; } li{ list-style: none; } .Category{ margin-top: 20px; margin-bottom: 5px; } 

 <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="container"> <!-- This element's contents will be replaced with your component. --> </div>