title: How do I create a react list component from an array of objects?
body: <p>A developer gave me an api specification which is a <code>List</code> that can accept an array of objects using the <code>ListItem</code> shape described below; this will be transformed into a set of rendered <code>List.Item</code> components.</p>
  
  <p><strong>API</strong></p>
  
  <p>The <code>List</code> component accepts the following props:</p>
  
  <ul>
  <li><code>items</code> (<code>ListItem[]</code>): <strong>Required</strong>. This array should contain one or more JSX elements, or one or more <code>ListItem</code> objects (see below for details).</li>
  <li><code>searchable</code> (<code>string[]</code>): Optional. Accepts an array of strings which match the names of ListItem properties. If present, a localized freeform search box is rendered above the list, and entry within that field will filter the internal data using the provided keys as a guide.</li>
  </ul>
  
  <p><strong>Schemas</strong></p>
  
  <hr>
  
  <p><code>ListItem</code></p>
  
  <p><code>ListItem</code> is the object schema for an individual item in the list.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
      // REQUIRED: The main title of the list item.
      title: string,
      // OPTIONAL: A secondary title.
      subtitle: string,
      // OPTIONAL: Additional labeling which appears directly below the title or subtitle label: String,
      // OPTIONAL: If provided, a date will always appear at the top of the list item
      date: Date,
      // OPTIONAL: An array of actions which are appended to the right side of the list item.
      actions: [
          {
              label: string | JSX.Element,
              action: Function
          }
      ]
  }</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><strong>My implementation which is not working</strong></p>
  
  <p><code>journalList.jsx</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import PropTypes from "prop-types";
  import React from "react";
  import {Components} from "reusable-web-components";
  
  const {
      Icon,
      List
  } = Components;
  
  const JournalList = (props) =&gt; {
    const {description, title} = props;
    
    const formattedItems = [
      {
          title: title,
          description: description,
          actions: [
              {
                  label: &lt;Icon name="edit" /&gt;,
                  action: () =&gt; {}
              },
              {
                  label: &lt;Icon name="delete" /&gt;,
                  action: () =&gt; {}
              }
          ]
      }
  ];
      return(
          &lt;List items={formattedItems} searchable={["title"]} /&gt;
      )
  }
  
  JournalList.propTypes = {
    "title": PropTypes.string.isRequired,
    "description": PropTypes.string.isRequired
  };
  
  JournalList.defaultProps = {
      
  };
  
  export default JournalList;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><strong>Now here is the parent component</strong></p>
  
  <p><code>journal.jsx</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import api from "bees";
  import JournalList from './JournalList';
  import React from "react";
  import store from "store";
  
  
  class Journal extends React.Component {
      constructor (props) {
          super(props)
          this.state = {
              "displayList": true,
              "journalList": null,
              "searchJournalList": []
          }
      }
  
      componentDidMount = () =&gt; {
          store.dispatch(api.getJournals()).then((result) =&gt; {
              this.setState(() =&gt; ({"journalList": result.body.data}));
          }).
              catch(() =&gt; {
                  this.setState(() =&gt; ({"journalList": []}));
              });
      }
  
      onEdit = () =&gt; {
          // TODO: Update a Journal
      }
  
      onDelete = () =&gt; {
          // TODO: Delete a Journal 
      }
      render() {
          return (
              &lt;div&gt;
                 
                      &lt;JournalList&gt;
                          {
                              journalList.map((items) =&gt; {
                                  return{
                                      key={items.title}
                                          title={items.title} 
                                          description={items.description} 
                                  }
                              })                            
                          }
                      &lt;/JournalList&gt;
                 
              &lt;/div&gt;            
          ) 
      }   
  }
  
  
  export default Journal;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need to be able to successfully iterate over the data I am getting from my store and create a list of <code>journal</code> entries. According to his documentation the output should look like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div class="list"&gt;
      &lt;div class="list__search"&gt;
        &lt;div class="form-group"&gt;
          &lt;input placeholder="Search" id="ListSearch_0.1429790340540955" class="form-control"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="list__item"&gt;
        &lt;div class="list-item"&gt;
          &lt;div class="list-item__contents"&gt;
            &lt;div class="list-item-contents"&gt;
              &lt;div class="list-item-contents__title"&gt;Journal 1&lt;/div&gt;
              &lt;div class="list-item-contents__title"&gt;Journal 2&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="list-item__actions"&gt;
            &lt;button class="list-item-action"&gt;&lt;svg class="icon icon--medium"&gt;&lt;use xlink: href="#edit-icon"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/button&gt;
            &lt;button class="list-item-action"&gt;&lt;svg class="icon icon--medium"&gt;&lt;use xlink: href="#delete-icon"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>