在react / mobx中渲染对象列表

Question

i have a list of objects in my jsx class. Let's assume it's a fixed list of objects for now

versions = [
{owner: "luca", date: "today", fw: "00"},
{owner: "thomas", date: "tomorrow", fw: "00"},
{owner: "peter", date: "yesterday", fW: "00"},];

i'm trying to render the values of these objects in nested div elements on my webpage. basically it's a panel of rows that i represent as divs. here's the html for it

<div className="fc-revisions-sidebar revisions-panel flex-vertical flex-grow-1">
        <div className="fc-revisions-sidebar-header fc-revisions-sidebar-header-bg-color-brand">
            <div className="fc-revisions-sidebar-title">Version history</div>
        </div>
        <div className="fc-revisions-sidebar-revisions-list-container">
            <div className="fc-revisions-sidebar-revisions-list">
                <div role="rowgroup">
                    <div className="fc-revisions-collapsible-panel" role="button">
                        <div className="fc-revisions-collapsible-panel-container">
                            <div className="fc-revisions-row fc-revisions-row-selected" role="row" aria-selected="true" aria-level="1">
                                <div className="fc-revisions-row-content-wrapper">
                                    <div className="fc-revisions-row-header fc-row-content">
                                        <div className="fc-revisions-row-text-box" rows="1" maxLength="80" aria-multiline="false">
                                            **{version.date}**
                                        </div>
                                    </div>
                                    <div className="fc-revisions-row-content fc-row-content" role="presentation">
                                        <div className="fc-revisions-row-collaborator-list">
                                            <div className="fc-revisions-row-collaborator">
                                                <span className="fc-versions-rown-collaborators-label">Created by **{version.owner}**</span>
                                                <span className="fc-revisions-row-collaborator-name">**{version.fw}**</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

i'm not sure how to implement this in my component class!! starting from the first div after this one

                  <div role="rowgroup">

my html code to create each row in the panel starts. I want to iterate over the objects in my list and create/fill each row in my panel with the right data from that list

I've tried a dozen different ways but nothing is showing up on my webpage. I just don't understand how to iterate over the list of objects in 'versions' and create/fill the panel in progress.

Answer 1

Iteration is normally done by map ing an array of values to an array of components. Something like this:

versions = [ ... ]

return (
  <div>
    <div>Version History</div>
    {
      versions.map(version =>
        <div key={version.date}>
          {version.date}
        </div>
      )
    }
  </div>
)

Note that for Reacts reconciliation to work properly when potentially re-rendering with a new array of values, the outer element in the array should have a unique key attribute so that React quickly can recognize any removed or added values in the array on the next render.

Answer 2

Let assume you have array of objects declared inside render using const. You can iterate the array either using .map, .forEach, for loop etc. In your case I would prefer .map for iteration because map returns new array. So inside the map construct jsx elements and return them.

Now, returned jsx elements will be placed in versionItems array. You can just call that with {} like expression in render return.

render(){
     const versions = [
       {owner: "luca", date: "today", fw: "00"},
       {owner: "thomas", date: "tomorrow", fw: "00"},
       {owner: "peter", date: "yesterday", fW: "00"},];

     const versionItems = versions.map((item, index) => {
      return (
         <div key={"key"+index} role="rowgroup">
              //just get all your property values here using item.owner, item.date etc
        </div>
     )
 });
    return(
         <div>
             {versionItems}
         </div>
    )
}