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); }
I want to load 2 records at a time, how can I add break using fields.map function.
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
})
}