Creating an object in react native - react-native

Question

I am trying to save the noteText inside a text, but it's becoming a problem. I would like to make an object with the same attributes: name, date, note and to display only the name and date. Also, I would like, when I create a Noteto map it in an array. Like so
let notes = this.state.noteArray.map((val, key)=>{
return <Note key={key} keyval={key} val={val}
deleteMethod={()=>this.deleteNote(key)} openNote={()=>this.openNote(key)}/>
});
And here is how I add an item:
this.props.navigation.state.params.noteArray.push({
'noteNumber':'Note '+ this.props.navigation.state.params.noteArray[key],
'date':d.getFullYear()+
"/"+(d.getMonth()+1) +
"/"+ d.getDate(),
'note': this.state.noteText
});
Here is the class note:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
TouchableWithoutFeedback,
} from 'react-native';
export default class Note extends Component {
render() {
return (
<TouchableWithoutFeedback key={this.props.keyval} onPress={this.props.openNote}>
<View style={styles.note}>
<Text style={styles.noteDate}>{this.props.val.noteNumber}</Text>
<Text style={styles.noteDate}>{this.props.val.date}</Text>
<Text style={styles.noteText}>{this.props.val.note}</Text>
<TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>
<Text style={styles.noteDeleteText}>Del</Text>
</TouchableOpacity>
</View>
</TouchableWithoutFeedback>
);
}
}
const styles = StyleSheet.create({
note: {
position: 'relative',
padding: 20,
backgroundColor:'#fff',
paddingRight: 100,
borderLeftWidth:1,
borderLeftColor: '#000',
borderRightWidth:1,
borderRightColor: '#000',
borderBottomWidth:1,
borderBottomColor: '#000'
},
noteDate:{
paddingLeft: 20,
borderLeftWidth: 10,
borderLeftColor: '#0000FF'
},
noteText: {
paddingLeft: 20,
borderLeftWidth: 10,
borderLeftColor: '#0000FF',
opacity: 0,
},
noteDelete: {
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2980b9',
padding: 10,
top: 10,
bottom: 10,
right: 10
},
noteDeleteText: {
color: 'white'
},
});

Answer 1

Here is the example I worked on:
import React, { Component } from "react";
class Counter extends Component {
state = { counter: this.props.startsWith };
...
}
In stead of Counter, I used Note itself.