title: react-sortablejs - Setting the 'onChange' method on an object with nested arrays
body: <p>I'm using the <a href="https://www.npmjs.com/package/react-sortablejs" rel="nofollow noreferrer">react-sortablejs</a> library.
  When trying to move cards within the list. I get the error: </p>
  
  <blockquote>
    <p>Cannot read property 'map' of undefined</p>
  </blockquote>
  
  <p>I have a dense structure and it gets lost here. How to handle <code>onChange</code> so that I can see in the console that the order of the notes within the list has changed.</p>
  
  <p>Demo <a href="https://stackblitz.com/edit/react-ra4spr" rel="nofollow noreferrer">here</a></p>
  
  <pre><code>import Sortable from 'react-sortablejs';
  
  // Functional Component
  const SortableList = ({ items, onChange }) =&gt; {  
      return (
          &lt;div&gt;
            &lt;Sortable
              tag="ul"
              onChange={(order, sortable, evt) =&gt; {
                console.log(order)
                onChange(order);
              }}
  
            &gt;
              {items.listItems.map(val =&gt; {
               return &lt;li key={uniqueId()} data-id={val}&gt;List Item:  {val.title}&lt;/li&gt;})
              }
            &lt;/Sortable&gt;
          &lt;/div&gt;
      );
  };
  
  class App extends React.Component {
      state = {
         item: {
          id: "abc123",
          name: "AAA",
          lists: [
            {
              id: "def456", 
              list_id: "654wer",
              title: 'List1',
              desc: "description",
              listItems: [
                {
                  id: "ghj678", 
                  title: "ListItems1",
                  listItemsId: "88abf1"
                },
                {
                  id: "poi098", 
                  title: "ListItems2",
                  listItemsId: "2a49f25"
                },
                {
                  id: "1oiwewedf098", 
                  title: "ListItems3",
                  listItemsId: "1a49f25dsd8"
                }
              ]   
            },
            {
              id: "1ef456", 
              list_id: "654wer",
              title: 'List 2',
              desc: "description",
              listItems: [
                {
                  id: "1hj678", 
                  title: "ListItems4",
                  listItemsId: "18abf1"
                },
                {
                  id: "1oi098", 
                  title: "ListItems5",
                  listItemsId: "1a49f25"
                },
                {
                  id: "1oiwewe098", 
                  title: "ListItems6",
                  listItemsId: "1a49f25dsd"
                }
              ]   
            },
            {
              id: "2ef456", 
              title: 'List 3',
              list_id: "254wer",
              desc: "description",
              listItems: [
                {
                  id: "2hj678", 
                  title: "ListItems7",
                  listItemsId: "28abf1"
                },
                {
                  id: "2oi098", 
                  title: "ListItems8",
                  listItemsId: "234a49f25"
                },
                {
                  id: "df098", 
                  title: "ListItems9",
                  listItemsId: "1asd8"
                }
              ]   
            }
          ]
        }
      };
  
      render() {
        const c = this.state.item['lists'].map(item =&gt; { return item.listItems});
  
          return (
            this.state.item['lists'].map(item =&gt; {       
              return  (&lt;div&gt;
                        {item.title}
                        &lt;SortableList
                          key={uniqueId()}
                          items={item}
                          onChange={(item) =&gt; {
                            console.log(item)
                            this.setState({item});
                          }}
                        &gt;
                        &lt;/SortableList&gt;
                      &lt;/div&gt;)
            })
          )
      }
  };
  </code></pre>
  
  <p>Thanks in advance.</p>