Untitled
unknown
plain_text
10 months ago
2.5 kB
2
Indexable
import React, { useState } from 'react'; import { View, Text, TextInput, Button, FlatList, StyleSheet, Platform } from 'react-native'; const App = () => { const [textValue, setTextValue] = useState(''); const [noteArray, setNoteArray] = useState([]); const [isActive, setIsActive] = useState(false); const [updateIndex, setUpdateIndex] = useState(null); const takeText = (event) => { setTextValue(event.target.value); }; const saveNote = () => { if (isActive) { const updatedNoteArray = [...noteArray]; updatedNoteArray[updateIndex] = textValue; setNoteArray(updatedNoteArray); setIsActive(false); setUpdateIndex(null); } else { setNoteArray([...noteArray, textValue]); } setTextValue(''); }; const deleteItem = (item) => { setNoteArray(noteArray.filter((text) => text !== item)); }; const updateItem = (item, index) => { setTextValue(item); setIsActive(true); setUpdateIndex(index); }; return ( <View style={styles.container}> <Text style={styles.header}>Take Notes</Text> <View style={styles.row1}> <TextInput placeholder="Enter Note" value={textValue} name="textarea" onChange={takeText} style={styles.textInput} /> <Button title={isActive ? "Update" : "Save"} onPress={saveNote} /> </View> <View style={styles.row2}> <FlatList data={noteArray} renderItem={({ item, index }) => ( <View style={styles.note}> <Text>{item}</Text> <View style={styles.buttons}> <Button title="Delete" onPress={() => deleteItem(item)} /> <Button title="Update" onPress={() => updateItem(item, index)} /> </View> </View> )} keyExtractor={(item, index) => index.toString()} /> </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, header: { fontSize: 24, fontWeight: 'bold', marginBottom: 10, }, row1: { flexDirection: 'row', alignItems: 'center', marginBottom: 10, }, textInput: { flex: 1, height: 40, borderColor: 'gray', borderWidth: 1, paddingHorizontal: 10, }, row2: { flex: 1, }, note: { padding: 10, borderBottomWidth: 1, borderBottomColor: 'gray', }, buttons: { flexDirection: 'row', justifyContent: 'space-between', }, }); export default App;
Editor is loading...
Leave a Comment