I am experiencing an issue with the code provided below:
import React, { Component } from "react";
import { SafeAreaView } from 'react-navigation'
import {Keyboard, Text, View, TextInput, TouchableWithoutFeedback, Alert, KeyboardAvoidingView, StyleSheet} from 'react-native';
import { Button } from 'react-native-elements';
import EditableTable from 'react-native-editable-table';
export default class CreateNoteScreen extends Component {
constructor(props){
super(props)
this.state = {
NotesHeader : [
{value: 'Expend', input: 'c1', width: 30, sortable: false, defaultSort: 'ASC',editable: true},
{value: 'Value', input: 'c2', width: 20, sortable: false, editable: true}
],
NotesValue: [
[10, 'test'],
[20, {value: 'Edit Me', editable: true}],
[30, {value: 'Extra Editable Rows',editable:true}],
[20, {value: 'Edit Me', editable: true}],
[20, {value: 'Edit Me', editable: true}],
[20, {value: 'Edit Me', editable: true}],
[20, {value: 'Edit Me', editable: true}],
[20, {value: 'Edit Me', editable: true}],
[10, 'test'],
['', ''],
['', '']
]
}
}
_addNewColumn = () =>{
let newNotesvalues = this.state.NotesValue.map(function(item) {
item = [...item,[
'',
{
value: ' ',
editable: true
}]
];
return item;
});
this.setState(prevState => ({
NotesHeader: [...prevState.NotesHeader, {
value: 'Value',
input: 'c3',
width: 20,
sortable: false,
editable: true
}],
NotesValue: newNotesvalues
}))
render(){
return (
<SafeAreaView style={styles.container}>
<Button title="Add column" onPress={() => this._addNewColumn()} />
<EditableTable
columns ={ this.state.NotesHeader }
values= {this.state.NotesValue}
emptyRows={2}
onCellChange={(value, column, row, unique_id) => {
console.log(`Cell Change on Column: ${column} Row: ${row}
and unique_id: ${unique_id}`);
}}
onColumnChange={(value, oldVal, newVal) => {
console.log(`Column Change. Old Value: ${oldVal} New Value: ${newVal}`)
}}
customStyles={{
}}
style={styles.table}
/>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
table: {
flex: 1,
marginBottom: 30
}
});
NoteHeader represents the table header while NoteValue contains the table rows.
In the _addNewColumn function, I am trying to add a new column with blank values in the rows.
You can find the code to this snippet here:
While testing, I encountered an error and despite trying different approaches, I have not been successful. The error message states:
Cannot read property 'hasOwnProperty' of undefined TypeError: Cannot read property 'hasOwnProperty' of undefined at eval (module://react-native-editable-table.js:3:4930)
I would appreciate any help or guidance on resolving this issue effectively.