When I try to add to the beginning of an array in React Native I get the following error:
TypeError: todos.unshift is not a function. (In 'todos.unshift(newTodo)', 'todos.unshift' is undefined)
My Code is :
export default function App() {
const [todos, setTodos] = useState(['Hello']);
const [todo, setTodo] = useState('');
function addItem(newTodo) {
console.log(newTodo);
setTodos(todos.unshift(newTodo));
}
return (
<TouchableWithoutFeedback
onPress={() => {
Keyboard.dismiss();
}}
>
<View style={styles.container}>
<TextInput
placeholder='new todo'
style={styles.input}
value={todo}
onChangeText={(text) => {
setTodo(text);
}}
></TextInput>
<Button title='Add' onPress={()=>addItem(todo)}></Button>
</View>
</TouchableWithoutFeedback>
);
}
Why is this happening . Is useState not applying the type of todos as an array?
you can also try this as the array 'unshift' method does not return a modified array.
Clone the state first using the spread operator and then update the state.
function addItem(newTodo) {
let arrayToUpdate = [...todos];
arrayToUpdate.unshift(newTodo);
setTodos(arrayToUpdate);
}