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>
                 

CodePudding user response：

It's simple, just add ? before map. Example :

this.state.tableData?.value?.map [your code]

rowData?.map [your code]

CodePudding user response：

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