title: Correct way to map JSON to Table by Fetch API method (react js)
body: <p>I'm trying to map some json elements to a Table (Customers.jsx using ) but can't see to figure out the correct way. How to insert my <em><strong>Fetch Method</strong></em> into <em><strong>Customers.jsx</strong></em> correctly? especially map <strong>renderBody</strong> part and the <strong>bodyData={/<em>The JsonData</em>/}</strong></p>
  <p><em><strong>Fetch method</strong></em></p>
  <pre><code>componentDidMount() {
      this.refershList();
  }
  
  async refershList() {
      const cookies = new Cookies();
      await fetch('https://xxxxxxxxxxxxxxxxx/Customers', {
          headers: { Authorization: `Bearer ${cookies.get('userToken')}` }
      })
          .then(response =&gt; response.json())
          .then(data =&gt; {
              this.setState({ deps: data });
          });
  }
  </code></pre>
  <p><em><strong>Customers.jsx</strong></em></p>
  <pre><code>import React from 'react'
  
  import Table from '../components/table/Table'
  
  
  const customerTableHead = [
      '',
      'name',
      'email',
      'phone',
      'total orders',
      'total spend',
      'location'
  ]
  
  const renderHead = (item, index) =&gt; &lt;th key={index}&gt;{item}&lt;/th&gt;
  
  const renderBody = (item, index) =&gt; (
      &lt;tr key={index}&gt;
          &lt;td&gt;{item.id}&lt;/td&gt;
          &lt;td&gt;{item.name}&lt;/td&gt;
          &lt;td&gt;{item.email}&lt;/td&gt;
          &lt;td&gt;{item.phone}&lt;/td&gt;
          &lt;td&gt;{item.total_orders}&lt;/td&gt;
          &lt;td&gt;{item.total_spend}&lt;/td&gt;
          &lt;td&gt;{item.location}&lt;/td&gt;
      &lt;/tr&gt;
  )
  
  const Customers = () =&gt; {
      return (
          &lt;div&gt;
              &lt;h2 className=&quot;page-header&quot;&gt;
                  customers
              &lt;/h2&gt;
              &lt;div className=&quot;row&quot;&gt;
                  &lt;div className=&quot;col-12&quot;&gt;
                      &lt;div className=&quot;card&quot;&gt;
                          &lt;div className=&quot;card__body&quot;&gt;
                              &lt;Table
                                  limit='10'
                                  headData={customerTableHead}
                                  renderHead={(item, index) =&gt; renderHead(item, index)}
                                  bodyData={/*The JsonData*/}
                                  renderBody={(item, index) =&gt; renderBody(item, index)}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default Customers
  </code></pre>
  <p><em><strong>API JSON data</strong></em></p>
  <pre><code>[
     {
        &quot;id&quot;:1,
        &quot;name&quot;:&quot;Brittan Rois&quot;,
        &quot;email&quot;:&quot;brois0@unicef.org&quot;,
        &quot;location&quot;:&quot;Bator&quot;,
        &quot;phone&quot;:&quot;+62 745 807 7685&quot;,
        &quot;total_spend&quot;:&quot;$557248.44&quot;,
        &quot;total_orders&quot;:24011
     },
     {
        &quot;id&quot;:2,
        &quot;name&quot;:&quot;Matthew Junifer&quot;,
        &quot;email&quot;:&quot;mjunifer1@buzzfeed.com&quot;,
        &quot;location&quot;:&quot;Bromma&quot;,
        &quot;phone&quot;:&quot;+46 993 722 3008&quot;,
        &quot;total_spend&quot;:&quot;$599864.94&quot;,
        &quot;total_orders&quot;:60195
     },
     {
        &quot;id&quot;:3,
        &quot;name&quot;:&quot;Finlay Baylay&quot;,
        &quot;email&quot;:&quot;fbaylay2@purevolume.com&quot;,
        &quot;location&quot;:&quot;Atalaia&quot;,
        &quot;phone&quot;:&quot;+55 232 355 3569&quot;,
        &quot;total_spend&quot;:&quot;$171337.47&quot;,
        &quot;total_orders&quot;:96328
     },
     {
        &quot;id&quot;:4,
        &quot;name&quot;:&quot;Beryle Monelli&quot;,
        &quot;email&quot;:&quot;bmonelli3@amazonaws.com&quot;,
        &quot;location&quot;:&quot;Martingança&quot;,
        &quot;phone&quot;:&quot;+351 734 876 8127&quot;,
        &quot;total_spend&quot;:&quot;$335862.78&quot;,
        &quot;total_orders&quot;:78768
     }
  ]
  </code></pre>
  <p><em><strong>Table.jsx</strong></em></p>
  <pre><code>import React, {useState} from 'react'
  
  import './table.css'
  
  const Table = props =&gt; {
  
      const initDataShow = props.limit &amp;&amp; props.bodyData ? props.bodyData.slice(0, Number(props.limit)) : props.bodyData
  
      const [dataShow, setDataShow] = useState(initDataShow)
  
      let pages = 1
  
      let range = []
  
      if (props.limit !== undefined) {
          let page = Math.floor(props.bodyData.length / Number(props.limit))
          pages = props.bodyData.length % Number(props.limit) === 0 ? page : page + 1
          range = [...Array(pages).keys()]
      }
  
      const [currPage, setCurrPage] = useState(0)
  
      const selectPage = page =&gt; {
          const start = Number(props.limit) * page
          const end = start + Number(props.limit)
  
          setDataShow(props.bodyData.slice(start, end))
  
          setCurrPage(page)
      }
  
      return (
          &lt;div&gt;
              &lt;div className=&quot;table-wrapper&quot;&gt;
                  &lt;table&gt;
                      {
                          props.headData &amp;&amp; props.renderHead ? (
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      {
                                          props.headData.map((item, index) =&gt; props.renderHead(item, index))
                                      }
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                          ) : null
                      }
                      {
                          props.bodyData &amp;&amp; props.renderBody ? (
                              &lt;tbody&gt;
                                  {
                                      dataShow.map((item, index) =&gt; props.renderBody(item, index))
                                  }
                              &lt;/tbody&gt;
                          ) : null
                      }
                  &lt;/table&gt;
              &lt;/div&gt;
              {
                  pages &gt; 1 ? (
                      &lt;div className=&quot;table__pagination&quot;&gt;
                          {
                              range.map((item, index) =&gt; (
                                  &lt;div key={index} className={`table__pagination-item ${currPage === index ? 'active' : ''}`} onClick={() =&gt; selectPage(index)}&gt;
                                      {item + 1}
                                  &lt;/div&gt;
                              ))
                          }
                      &lt;/div&gt;
                  ) : null
              }
          &lt;/div&gt;
      )
  }
  
  export default Table
  </code></pre>
  <p><em><strong>Table.css</strong></em></p>
  <pre><code>    .table-wrapper {
      overflow-y: auto;
  }
  
  table {
      width: 100%;
      min-width: 400px;
      border-spacing: 0;
  }
  
  thead {
      background-color: var(--second-bg);
  }
  
  tr {
      text-align: left;
  }
  
  th,
  td {
      text-transform: capitalize;
      padding: 15px 10px;
  }
  
  tbody &gt; tr:hover {
      background-color: var(--main-color);
      color: var(--txt-white);
  }
  
  .table__pagination {
      display: flex;
      width: 100%;
      justify-content: flex-end;
      align-items: center;
      margin-top: 20px;
  }
  
  .table__pagination-item ~ .table__pagination-item {
      margin-left: 10px;
  }
  
  .table__pagination-item {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
  }
  
  .table__pagination-item.active,
  .table__pagination-item.active:hover {
      background-color: var(--main-color);
      color: var(--txt-white);
      font-weight: 600;
  }
  
  .table__pagination-item:hover {
      color: var(--txt-white);
      background-color: var(--second-color);
  }
  </code></pre>