having diffculty to empty the state in react-native

Question

Hy, I'm working on react-native to integrate WebSocket. I'm setting the list state const [messagesList, setMessagesList] = useState([]) when I set the messages in the list but facing an issue which is that when I map the list on the second time it also display the pervious data like on first map it print

Hello Adil
How're you?

when I get the new data it also map it again:

Hello Adil // first map
How're you? // first map
//second map
Hello Adil
How're you?
new message
new message

I want my old messages to remain on-screen but don't display them again on the screen here's the code: Setting the state

 setMessagesList((messagesList)=>[...messagesList,{'msg':type,'user':data.text}])

map the messageList

messagesList.map((msg,index)=>{
      return(
        <View style={{flexDirection:'row',
        justifyContent:msg.user == 'adilijaz.09@gmail.com' ? 'flex-start' : 'flex-end'

        }} > 
        <Text>{msg.msg}--{msg.user}</Text>
      </View> 
      )
      })

this might have been an answer to your question: https://stackoverflow.com/questions/54807454/what-is-prevstate-in-reactjs — Raphael, Jul 06 '21 at 07:42
can you check if your setMessagesList is getting called more than once? — Amit Chauhan, Jul 06 '21 at 07:43
I think you should show how you are calling setMessagesList() — Tushar Shahi, Jul 06 '21 at 07:43
@AmitChauhan its calling when receive new message or send the message — Adil Ijaz, Jul 06 '21 at 07:49
@AdilIjaz one of reason for it's getting called twice is if you have added listener to your socket twice. So if you can just put console log in that or show your entire relevant code. — Amit Chauhan, Jul 06 '21 at 07:52
Can you please share the flow of your source code so i can try to sort out your issue ? — Jignesh Mayani, Jul 06 '21 at 08:04

having diffculty to empty the state in react-native

0 Answers0