useState array not updating correctly as it creates duplicate items

Question

I am trying to update the useState() array by passing through value of TextInput (onChangeText). The code is working fine however whenever I am clinking onPress (addBook function) it is updating/ adding previous text in the array not current one. So, to add current text I have to click button twice which is creating dupliate items in my array.

I may be making very studpid misatke but cant find it. Can any one help. Below is my entire code.

import React, { useState } from "react";
import { TextInput, View, Dimensions, TouchableOpacity } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
const screenHeight = Math.round(Dimensions.get("window").height);
const AddBookName = ({ hidePressed }) => {
 const [book, setBook] = useState();
 const [bookList, setBookList] = useState(["no name"]);
 const addBook = () => {
 setBookList([...bookList, book]);
 console.log(bookList);
 };
 return (
 <View style={{ flexDirection: "row" }}>
 <View style={{ flex: 1 }}>
 <TextInput
 style={{
 fontSize: 20,
 paddingVertical: 10,
 backgroundColor: "#ececec",
 paddingLeft: 10,
 }}
 placeholder="Enter the Book Name"
 placeholderTextColor="grey"
 // value={book}
 onChangeText={(text) => setBook(text)}
 type="text"
 ></TextInput>
 </View>
 <TouchableOpacity
 style={{
 flex: 0.15,
 backgroundColor: "green",
 alignItems: "center",
 justifyContent: "center",
 }}
 onPress={() => addBook()} 
 >
 <View>
 <MaterialCommunityIcons name="check" size={24} color="white" />
 </View>
 </TouchableOpacity>
 <TouchableOpacity
 style={{
 flex: 0.15,
 backgroundColor: "red",
 alignItems: "center",
 justifyContent: "center",
 }}
 onPress={hidePressed}
 >
 <View>
 <Entypo name="cross" size={24} color="white" />
 </View>
 </TouchableOpacity>
 </View>
 );
};
export default AddBookName;

enter image description here

• Ketan Ramteke: your app is working fine, I don't see any duplication of data. Try rendering it in FlatList, everything working perfectly
• sheriff_paul: I see no duplication of data as well
• Akhil Prasad Godiyal: Hi @KetanRamteke Thanks for comment. You are correct when I am rendering the list in Flatlist its working fine. Thanks again.

Answer 1

Try to clean the previous input value after adding to the list.

 const addBook = () => {
 if (book) {
 setBookList([...bookList, book]);
 console.log(bookList);
 setBook("");
 }
 };

Answer 2

This should remove duplicates:

const addBook = () => {
 setBookList(Array.from(new Set([...bookList, book])));
 console.log(bookList);
};

You could also store your booklist as a set instead of an array.