Obtengo un objeto json que se ve así:
Array [ Object { "department": "department 1", "formName": "form 1", "id": 1, }, Object { "department": "department 1", "formName": "form 2", "id": 2, }, Object { "department": "deparment 1", "formName": "form 3", "id": 3, }, Object { "department": "department 1", "formName": "form 4", "id": 4, }, Object { "department": "department 2", "formName": "form 5", "id": 5, },]
como puede ver, solo hay 2 departamentos únicos, pero 5 formas diferentes. 4 de los formularios pertenecen al departamento 1 y el otro formulario restante pertenece al departamento 2
Estoy tratando de renderizar 2 botones que se ven así:
departamento 1
departamento 2
este es el componente de lista plana que tengo en este momento
<FlatList data={this.state.dataList} keyExtractor={(item) => item.id.toString()} renderItem={({ item }) => { return ( <TouchableWithoutFeedback onPress={console.log("touched")} style={styles.clearBtn} > <Text style={styles.clearBtnText}>{item.department}</Text> <Text style={styles.clearBtnText2}>{item.formName}</Text> </TouchableWithoutFeedback> ); }} />Sin embargo, esto obviamente genera 5 botones que se ven así:
departamento 1
departamento 1
departamento 1
departamento 1
departamento 2
Es posible que desee remodelar sus datos y usar una SectionList en lugar de una FlatList , parece más adecuada para su caso de uso.
Los documentos oficiales están aquí , y si nos guiamos por su ejemplo, sus datos deberían verse así:
[ { title: 'Department 1', data: [{formName: 'form1', id: 1} ,{formName: 'form2', id:2} ...] }, { title: 'Department 2', data: [{formName: 'form5', id: 5}] } ] Y su representación SectionList se vería así
<SectionList sections={this.state.dataList} keyExtractor={(item) => item.id.toString()} renderSectionHeader={({ section: { title } }) => ( <Text style={/*Whatever style you want*/}>{title}</Text> )} renderItem={({ item }) => { return ( <TouchableWithoutFeedback onPress={() => console.log("touched")} style={styles.clearBtn} > <Text style={styles.clearBtnText2}>{item.formName}</Text> </TouchableWithoutFeedback> ); }} /> Asumiendo que this.state.dataList es el modelo de datos que he presentado
como sugirió @Ron B., debe convertir sus datos de estructura de matriz plana a sección como se muestra a continuación.
const flatToSection = (data)=>{ const getDepartmentData = (department,data)=>{ return data.filter(item=> item.department === department) } const departments =[...new Set( data.map(el=> el.department))] const sections = departments.map((department)=>({ title:department, data :getDepartmentData(department,data) })) return sections } export default flatToSectionLuego reemplace FlatList con la lista de secciones.
Ejemplo de trabajo: https://snack.expo.dev/@emmbyiringiro/c8a7cd