React comment section not updating properly after submission. Anyone got tips? (screenshots provided)

Solution for React comment section not updating properly after submission. Anyone got tips? (screenshots provided)
is Given Below:

My issue is that when I submit a comment and the state gets updated, the chat does not update properly. Here’s a screenshot of how it looks before commenting and after. I’m not entirely sure why the dots appear, as from my understanding, it should update with the comments, and there are no empty comments in the database.

Edit: Just added the chat return!



Here’s my code for the chat component:

const Chat = () => {
const {loggedIn, setLoggedIn} = useContext(LoginContext) 
const {loginUsername, setLoginUsername} = 
const {tickerValue, setTickerValue} = useContext(TickerValue)
console.log('LOGIN USERNAME:' + loginUsername)
const history = useHistory()
///const value = history.location.state
const searchValue = tickerValue.toUpperCase()
const classes = styles()
const [comments, setComments] = useState([])
const commentSection = []

useEffect(() => {
    if (messageDiv) {
    if (searchValue.length > 0) {
        console.log('SEARCHVALUE ' + searchValue)
        console.log('checking comments')
        Axios.get('' + searchValue)
        .then((res) => {
            const data =

const postComment = () => {
    const content = document.getElementById('commentPost').value
    if (loginUsername.length > 0) {"", {
            stock_name: searchValue,
            username: loginUsername,
            content:  content
        .then((res) => {
            Axios.get('' + searchValue)
            .then((data) => {
                const comm =
    } else {
        alert('YOU ARE NOT LOGGED IN')
        <Card elevation={6} className={classes.commentCard}>
            <CardHeader align="left" title={searchValue + "'s Comments"}/>
            <Divider className={classes.titleDiv}/>
            <div className={classes.textPanel} id="messageDiv">
                {comments ? 
                    Object.keys(comments).map((key) => {
                            <div className={classes.row}>
                                <Paper variant="outlined" className={classes.paperDiv}>
                                    <Typography className={classes.username}variant="body">{comments[key].username}: </Typography>
                                    <Typography className={classes.content}variant="body">{comments[key].content}</Typography>
                    : <p>no comments</p>
            <Divider className={classes.postDiv}/>
                    <div className={classes.titleDiv}>
                        <TextField variant="outlined" 
                        label="Comment" size="small" 
                        <Button variant="outlined" className= 
                   {classes.button} onClick= 
                    <div className={classes.postDiv}>
                        <TextField variant="outlined" disabled 
                        label="Login required" size="small"/>
                        <Button variant="outlined" className= 
                     {classes.button} disabled>Post</Button>


export default Chat

in useEffect hook there is a list of variables whoose state change you follow and your list is empty, try adding variable there

I got it! Turns out on the second .then after the postComment function, I was updating my state with setComments( where it should have been setComment( because “res” was the response of the first .then and “data” was for the second. Dumb mistake but it took me two days to fix!