How to re-render after updating useState in React?

Question

What I want is that after I push the button, and the useState had refreshed, I want to refresh the content.

Here is my code:

import React, {useState, useEffect} from 'react';
import MessComponents from './messConatiner';


function Conatiner() {
  const [messes, setMesses] = useState([
    {name: "Chater1: ", mess: "Hi", status: "left"},
    {name: "", mess: "Hi!", status: "right"},
    {name: "Chater2: ", mess: "I have some trouble with react...", status: "left"}
  ]);

  function Send(){
    let list = messes;
    list.push({name: "", mess: document.querySelector("input").value, status:             "right"});
    setMesses(list);
    console.log(messes);
    }

  return (
    <div className="container" id="cont">
        <MessComponents messes={messes}/>
        <input className="chat-input" type="text" /> 
        <button onClick={Send}>Send</button>
    </div>
  );
}

export default Conatiner;

You are expecting `console.log(messes);` after `setMesses(list);` to log the updated `messes`. It will absolutely not as `setMesses` and `setState()`/`useState()` is asynchronous. — Alexander Staroselsky, Jun 20 '19 at 14:29
I console.log()-d and the state was updated, but the UI was not. — Laczkó Örs, Jun 20 '19 at 14:29
The problem here is that you're mutating the original list, which may interfere with change detection. `list = messes` is pointless, you need to make an actual copy. — jonrsharpe, Jun 20 '19 at 14:29
Use a method which returns a new array, push mutates. E.g. `newArr = array.concat(newItem)` or spread `newArr = [...array, newItem]` — Dominic, Jun 20 '19 at 14:31

Brad Ball · Accepted Answer · 2019-06-20T14:40:09.150

0

whenever you call setMesses() this will automatically re-render. One thing to add is that the function Send should be lowercase, only capitalize components not regular functions.
the problem is that you are trying to directly mutate the array in your statement list.push()

try using this instead of push

let list = [...messes, {name: "", mess: document.querySelector("input").value, status:  "right"} ]
setMesses(list)

edited Jun 20 '19 at 14:40

answered Jun 20 '19 at 14:29

Brad Ball

599
3
5

I chanced it, but still no update on the UI :(( – Laczkó Örs Jun 20 '19 at 14:34
are you mapping over the array to display the UI? – Brad Ball Jun 20 '19 at 14:35
The change you've suggested is unconnected to the first paragraph. Please rewrite this to be internally consistent. – jonrsharpe Jun 20 '19 at 14:36
Thank you! I initialized 2 times list. I fixd it, and it is working! Thank you!!! :)) – Laczkó Örs Jun 20 '19 at 14:37
please mark as answer if i helped solve your problem! you're welcome – Brad Ball Jun 20 '19 at 14:38
@jonrsharpe I want to keep the first paragraph because it actually corresponds to his question. I added an addition statement to try to explain what was wrong in his code. Is this better? – Brad Ball Jun 20 '19 at 14:41
I marked it :)) – Laczkó Örs Jun 20 '19 at 14:51

How to re-render after updating useState in React?

1 Answers1