title: How to re-render the Redux forms while using pagination
body: <p>I want to re-render sliced data and show in the form fields, I am using array.slice for slice chunks of data.</p>
  <h2>constructor function binding handleclick function</h2>
  <pre><code>    constructor() {
          super();
          this.state = {
              currentPage: 1,
              todosPerPage: 3,
          };
          this.handleClick = this.handleClick.bind(this);
      }
  
  handleClick = (event) =&gt; {
          this.setState({
              currentPage: Number(event.target.id)
          }, () =&gt; {
                  this.forceUpdate();
          });  
      }
  </code></pre>
  <h2>inside render function</h2>
  <pre><code> const pageNumbers = [];
          for (let i = 1; i &lt;= Math.ceil(this.props.facilityDataInputs.length / this.state.todosPerPage); i++) {
              pageNumbers.push(i);
          }
  
          const renderPageNumbers = pageNumbers.map(number =&gt; {
              return (
                  &lt;li key={number}&gt;
                       &lt;div style={{ display: 'inline-flex', cursor : 'pointer' }}&gt;
                      &lt;input type=&quot;button&quot;
                                  name=&quot;facilityId&quot;
                                  value={number}
                                  id={number}
                                  onClick={this.handleClick}
                              /&gt;
                          &lt;/div&gt;
                  &lt;/li&gt;
              );
          });
  </code></pre>
  <h2>Redux forms functions</h2>
  <pre><code>facilityList = ({ fields, meta: { error, submitFailed } }) =&gt; {
          const { currentPage, todosPerPage } = this.state;
  
          // Logic for displaying current todos
          const indexOfLastTodo = currentPage * todosPerPage;
          const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
  
  let fetchFields = fields.getAll();
          let displayFetchedFields = fetchFields.slice(indexOfFirstTodo, indexOfLastTodo);
          if (displayFetchedFields) {
              return displayFetchedFields.map((facility, index) =&gt; {
                  return (
                      &lt;li key={index} style={{ margin: '10px 0', color: '#071F5D' }}&gt;
                          &lt;div style={{ display: 'inline-flex' }}&gt;
                              ID:
                      &lt;Field
                                  name={`facilityData[${index}].facilityId`}
                                  component='input'
                                  value={this.props.facilityDataInputs[index].facilityId}
                              /&gt;
                          &lt;/div&gt;
                          &lt;div style={{ display: 'inline-flex' }}&gt;
                              Ref:
                      &lt;Field
                                  name={`facilityData[${index}].facilityRef`}
                                  component='input'
                                  value={this.props.facilityDataInputs[index].facilityRef}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  )
              })
          }
      }
  </code></pre>
  <h2>render function</h2>
  <pre><code>&lt;fieldarray name =&quot;facilitiData&quot; component ={this facilityList}&gt;
  </code></pre>
  <p>I can able to fetch slice data but, not able to re-render the forms.</p>