React native component not updating its state while rendering

Question

I am trying to render single book one by one from redux when click on next book button. I achieved it by using below code but issue is when i try to add some book in bookmarks and click on next book then next book star also showed as orange (which is bookmarked state). I also tried to make a bookmark btn code as a component so that its current state wont show in the next book but its still showing. How can i overcome this issue. Images of issue are attached. bookmarked state normal state

const renderBooks = totalBooks?.books?.length && totalBooks?.books[bookIndex] && <View>
    <View style={styles.spaceBetween}>
      <TouchableOpacity onPress={() => navigation.goBack()}><AntDesign name="arrowleft" size={28} color="#0b466b" /></TouchableOpacity>
      <Bookmark
        book={totalBooks?.books[bookIndex]}
      />
    </View>
    <ImageBackground source={totalBooks?.books[bookIndex].cover ? {uri: totalBooks?.books[bookIndex].cover} : BookCover} style={styles.bookCover}>

    </ImageBackground>
    <Text style={styles.bookTitle}>{totalBooks?.books[bookIndex].title}</Text>
    <ScrollView style={styles.bookDescriptionContainer} contentContainerStyle={{flexGrow: 1}}>
      <Text style={styles.bookDescription}>
        Lorem Ipsum is not simply random text. 
      </Text>
    </ScrollView>
    <View style={styles.actionBtnsContainer}>
      <TouchableOpacity onPress={() => setOptionsPopUp(true)}>
        <Text style={styles.buyItBtn}>Buy it</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => nextBook()}>
        <Text style={styles.readItBtn}>Next Book</Text>
      </TouchableOpacity>
    </View>
<View>


const [addToBookmark, setAddToBookmark] = useState(false);
  
  const handleBookmarks = () => {
    const myBookmark = addToBookmark;
    setAddToBookmark(!myBookmark)
    if(!myBookmark) {
      console.log('Add')
      addInBookmarks(book)
    } else {
      console.log('remove')
      removeFromBookmarks(book)
    }
  }

  useEffect(() => {

  }, [addToBookmark])

  return(
    <TouchableOpacity onPress={handleBookmarks}>
      <AntDesign name={addToBookmark ? "star" : "staro"} size={24} color={addToBookmark ? "#ff910c" : "#0b466b"} />
    </TouchableOpacity>
  );

score 0 · Answer 1 · answered Jan 12 '22 at 16:50

0

In the function nextBook() you can try set the state of setAddToBookmark(false) or if the book as been marked the state could be set to false or true dependig your data

answered Jan 12 '22 at 16:50

Brandonjgs

194
2
10

State is changing but when i click on next book button then previous state forwards to the next book which is wrong. I also tried to put the code into seperate component but its not worked. Just looked at the filled star and empty star as showing in attached picture – fahad javed Jan 12 '22 at 18:54
Could you show the function nextBook() ? – Brandonjgs Jan 12 '22 at 19:42
I am just doing +1 in bookIndex to render next book. renderBook function is written in first code line. totalBooks.books[bookIndex] totalBooks is coming from reducer in which there is an array named books and bookIndex is changing everytime when user clicks on nextBook – fahad javed Jan 12 '22 at 20:59

React native component not updating its state while rendering

1 Answers1