How to render 2 fields at a time from Redux fields

Question

I am loading data from api at a time 5 records , I want to render 2 records on first time, after clicking load more another 2 records have come. Redux fields array

<FieldArray name="facilityData"
                        component={this.getFacilities}
                    />

Returning function it includes map function which is running and rendering redux fields

getFacilities = ({ fields, meta: { error, submitFailed } }) => {

return fields.map((facility, index) => {
return <div>{index}</div>
})
}

I have implemented fields.slice() but this function is not working in Redux forms fields

I have tried

getFacilities = ({ fields, meta: { error, submitFailed } }) => {

        const setss = [...Array(fields)];
        console.log(setss);
    }

it s returning :

I want to load 2 records at a time, how can I add break using fields.map function.

Answer 1

You can use the index in the map function to control how many of the fields should display. Returning null will render nothing. You need to handle increasing the fieldsToShow variable yourself though.

const fieldsToShow = 2; // could be pulled from state


getFacilities = ({ fields, meta: { error, submitFailed } }) => {
  return fields.map((facility, index) => {
    return index < Math.min(fieldsToShow, fields.length) ? <div>{/* Render the field */}</div> : null
  })
}