USER
now we change the data like this {
name: ‘Monia ben foulen’,
id: 1,
metier: ‘infermiere’,
reclamations: [
{id: 1, date: ‘12/09/2022’, raison: ‘Harcèlement ou intimidation’},
{id: 2, date: ‘12/09/2022’, raison: ‘Harcèlement ou intimidation’},
{id: 3, date: ‘12/09/2022’, raison: ‘Harcèlement ou intimidation’},
{id: 4, date: ‘12/09/2022’, raison: ‘Harcèlement ou intimidation’},
{id: 5, date: ‘12/09/2022’, raison: ‘Harcèlement ou intimidation’},
{id: 6, date: ‘12/09/2022’, raison: ‘Harcèlement ou intimidation’},
{id: 7, date: ‘12/09/2022’, raison: ‘Harcèlement ou intimidation’},
{id: 8, date: ‘12/09/2022’, raison: ‘Harcèlement ou intimidation’},
],
},
{
name: ‘Monjia ben foulen’,
id: 2,
metier: ‘Pediatre’,
reclamations: [
{id: 1, date: ‘12/09/2022’, raison: ‘Harcèlement ou intimidation’},
{id: 2, date: ‘12/09/2022’, raison: ‘Harcèlement ou intimidation’},
{id: 3, date: ‘12/09/2022’, raison: ‘Harcèlement ou intimidation’},
],
}, display this data in flatList and with chaque reclamation display the name and the metier in card ASSISTANT
To display the data in FlatList with each reclamation displayed in a card that also shows the healthcare provider's name and job title, you can follow these steps:
1. Define a Card component that takes props for the name, job title, date, and reason
2. Create a state variable to store the data
3. In useEffect, set the state variable to the data
4. In the FlatList component, set the data prop to the state variable
5. Render an item in the FlatList that maps over the reclamations data and renders a Card for each reclamation with the healthcare provider's name and job title passed as props
Here is an example code snippet:
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
const data = [
{
name: 'Monia ben foulen',
id: 1,
metier: 'infermiere',
reclamations: [
{ id: 1, date: '12/09/2022', raison: 'Harcèlement ou intimidation' },
{ id: 2, date: '12/09/2022', raison: 'Harcèlement ou intimidation' },
{ id: 3, date: '12/09/2022', raison: 'Harcèlement ou intimidation' },
{ id: 4, date: '12/09/2022', raison: 'Harcèlement ou intimidation' },
{ id: 5, date: '12/09/2022', raison: 'Harcèlement ou intimidation' },
{ id: 6, date: '12/09/2022', raison: 'Harcèlement ou intimidation' },
{ id: 7, date: '12/09/2022', raison: 'Harcèlement ou intimidation' },
{ id: 8, date: '12/09/2022', raison: 'Harcèlement ou intimidation' },
],
},
{
name: 'Monjia ben foulen',
id: 2,
metier: 'Pediatre',
reclamations: [
{ id: 1, date: '12/09/2022', raison: 'Harcèlement ou intimidation' },
{ id: 2, date: '12/09/2022', raison: 'Harcèlement ou intimidation' },
{ id: 3, date: '12/09/2022', raison: 'Harcèlement ou intimidation' },
],
},
];
const Card = ({ name, metier, date, raison }) => (
<View style={styles.card}>
<Text style={styles.title}>{name}, {metier}</Text>
<Text>Date: {date}</Text>
<Text>Raison: {raison}</Text>
</View>
);
const Reclamations = () => {
const [reclamationsData, setReclamationsData] = useState([]);
useEffect(() => {
setReclamationsData(data);
}, []);
const renderItem = ({ item }) => (
<>
{item.reclamations.map((reclamation) => (
<Card
name={item.name}
metier={item.metier}
date={reclamation.date}
raison={reclamation.raison}
key={reclamation.id.toString()}
/>
))}
</>
);
return (
<FlatList
data={reclamationsData}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
);
};
const styles = StyleSheet.create({
card: {
backgroundColor: '#fff',
paddingVertical: 8,
paddingHorizontal: 12,
marginBottom: 8,
borderRadius: 4,
shadowColor: '#000',
shadowOpacity: 0.1,
shadowRadius: 4,
shadowOffset: { width: 0, height: 2 },
elevation: 2,
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 8,
},
});
export default Reclamations;
This code will render a FlatList with each reclamation displayed in a Card with the healthcare provider's name and job title.