I have a problem with the map, I do not understand why it gives me the error cannot read properties of null, the elements that are in the array also do not present any nulls so I am not understanding why this error occurs to me.
state = {
tableHead: [
'', 'Lunedi', 'Martedi', 'Mercoledi'
],
tableData: {
value: [
[{ name: 'David', event1: { test: 'prova', test1: 'prova2' }}],
[{ name: 'Lorenz', event1: { test: ['2', 'test'] }, event2: '3', event3: '4' }],
[{ name: 'Victor', event1: { test: ['2', 'test'] }, event2: '3', event3: '4' }],
[{ name: 'Franklyn', event1: { test: ['2', 'test'] }, event2: '3', event3: '4' }],
],
},
this is my Component Render: <Table borderStyle={{ borderColor: 'transparent' }}>
<Row data={this.state.tableHead} style={styles.head} textStyle={styles.text} />
{
this.state.tableData.value.map((rowData, index) => {
console.log('test', rowData),
<TableWrapper key={index} style={styles.row}>
{
rowData.map((item, index) => {
console.log('item', item.name),
<Text textStyle={styles.text}>{item.name} </Text>
})
}
</TableWrapper>
})
}
</Table>
It's simple, just add ? before map. Example :
this.state.tableData?.value?.map [your code]
rowData?.map [your code]
WillMount
state = undefined;
DidMount:
state = <your data>;
Your render function run before state has value
Solution is: You must check data first
this.state.tableData?.value?.map
rowData?.map
Check this: Optional Chaining