Why can't I edit a text again in TextInput using state of hooks? - react-native

Question

I'm currently developing an application using React Native.
This trial app has a component that has a TextInput and two buttons (ADD and DELETE).
When I press the ADD Button, a new component appears. If I press the DELETE Button that the same component disappears.
I control the TextInput with the index which is the same number as the index of the component.
The screen is like the photo bellow:
In this code, there is a bug when I edit some text I already inputes.
For Exanple:
enter some text at the input area index[0], then it works well.
press ADD button
edit the text I already done at the input area index[0] again, then I can't enter
text well...
My question is: why can't I edit the text I already inputted?
Here is the code:
import React, { useState } from "react";
import { View, Text, Button, TextInput, StyleSheet } from "react-native";
function Item({ number, handleInput, handleAdd, handleDelete, index }) {
return (
<View style={styles.list}>
<Text>{index}</Text>
<TextInput
style={{ borderWidth: 1 }}
value={number[index]}
onChangeText={(text) => {
handleInput(index, text);
}}
></TextInput>
<Button
title="ADD"
onPress={() => {
handleAdd();
}}
/>
<Button
title="DELETE"
onPress={() => {
handleDelete(index);
}}
/>
</View>
);
}
export default function SOFStateArray() {
const [count, setCount] = useState(1);
const [number, setNumber] = useState([]);
function handleAdd() {
setCount((v) => v + 1);
}
function handleDelete(index) {
setCount((v) => v - 1);
setNumber((v) => {
const ret = v.slice();
ret.splice(index, 1);
return ret;
});
}
function handleInput(index, text) {
setNumber((v) => {
v.splice(index, 1, text);
return v;
});
}
// function handleInput(index, text) {
// setNumber((v) => {
// const ret = v.slice();
// ret.splice(index, 1, text);
// return ret;
// });
// }
return (
<View>
{Array.from({ length: count }, (_, i) => (
<Item
number={number}
handleInput={handleInput}
handleAdd={handleAdd}
handleDelete={handleDelete}
key={i + "-" + number}
index={i}
/>
))}
</View>
);
}
const styles = StyleSheet.create({
list: {
margin: 10,
padding: 10,
backgroundColor: "#ddd",
},
});
Here is the first modified code(with roop to make components):
import React, { useState } from "react";
import { View, Text, Button, TextInput, StyleSheet } from "react-native";
function Item({ number, handleInput, handleAdd, handleDelete, index }) {
return (
<View style={styles.list}>
<Text>{index}</Text>
<TextInput
style={{ borderWidth: 1 }}
value={String(number)}
onChangeText={(text) => {
console.log(text);
handleInput(index, text);
}}
></TextInput>
<Button
title="ADD"
onPress={() => {
handleAdd();
}}
/>
<Button
title="DELETE"
onPress={() => {
handleDelete(index);
}}
/>
</View>
);
}
export default function SOFStateArray() {
const [count, setCount] = useState(1);
const [numbers, setNumber] = useState([0]);
function handleAdd() {
setCount((v) => v + 1);
}
function handleDelete(index) {
setCount((v) => v - 1);
setNumber((v) => {
const ret = v.slice();
ret.splice(index, 1);
return ret;
});
}
function handleInput(index, text) {
setNumber((v) => {
v.splice(index, 1, text);
return v;
});
}
// function handleInput(index, text) {
// setNumber((v) => {
// const ret = v.slice();
// ret.splice(index, 1, text);
// return ret;
// });
// }
return (
<View>
{numbers.map((number, i) => (
<Item
number={number}
handleInput={handleInput}
handleAdd={handleAdd}
handleDelete={handleDelete}
key={i + "-" + number}
index={i}
/>
))}
</View>
);
}
const styles = StyleSheet.create({
list: {
margin: 10,
padding: 10,
backgroundColor: "#ddd",
},
});
node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Answer 1

JavaScript array splice modifies the original array. And this means the array variable itself doesn't change. I suggest you to clone the original array, splice the cloned array and return it. This can work because react compares the old props to the new props and rerenders the component only when the props are different. For now, even though you removed an item from array, the array variable didn't change and it doesn't rerender the component.
import React from 'react';
import {
SafeAreaView,
StyleSheet,
View,
Text,
StatusBar,
TextInput,
Button,
} from 'react-native';
function Item({text, handleInput, handleAdd, handleDelete, index}) {
return (
<View style={styles.list}>
<Text>{index}</Text>
<TextInput
style={{borderWidth: 1}}
value={text}
onChangeText={(t) => {
handleInput(index, t);
}}
/>
<Button
title="ADD"
onPress={() => {
handleAdd();
}}
/>
<Button
title="DELETE"
onPress={() => {
handleDelete(index);
}}
/>
</View>
);
}
class App extends React.Component {
state = {
texts: [''],
};
handleAdd = () => {
const {texts} = this.state;
this.setState({texts: [...texts, '']});
};
handleDelete = (index) => {
const texts = [...this.state.texts];
texts.splice(index, 1);
this.setState({texts: texts});
};
handleInput = (index, text) => {
const {texts} = this.state;
texts[index] = text;
this.setState({texts});
};
render() {
const {texts} = this.state;
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<View style={styles.body}>
{texts.map((text, i) => (
<Item
key={'' + i}
text={text}
handleInput={this.handleInput}
handleAdd={this.handleAdd}
handleDelete={this.handleDelete}
index={i}
/>
))}
</View>
</SafeAreaView>
</>
);
}
}
const styles = StyleSheet.create({
body: {
backgroundColor: '#ffffff',
},
});
export default App;