Why setState not updating State instantly?

Question

setState not updating state immediately which cause the states to hold previous values not leading the correct action which is msg inside a div element on clicking button. I have to click it 2 times to get the desired outcome.
Help me out here ....

Answer 1

I think you need to post the code so they can help you..

Answer 2

Maybe you have a problem in the state constants, Can you give us your code, so that the problem is more clear and we can help you

Answer 3

i have got it sorted using async and await but when i run for testcases its failing , if i am using a class component .
if the same code is written as functional component , UI is working fine , but when testing upon firing events , the values for the fields which are set in testcase are not getting assigned , which is leading to failure of testcase

Answer 4

test('testcase1', async() => {
render(<UrlValidator />);

const inputDomain = screen.getByTestId('domain');
const inputPath = screen.getByTestId('path');
const inputMethod = screen.getByTestId('method');
const inputBody = screen.getByTestId('body');

const form = screen.getByTestId('submit');

expect(inputDomain).toBeTruthy();
expect(inputPath).toBeTruthy();
expect(inputMethod).toBeTruthy();
expect(inputBody).toBeTruthy();

fireEvent.submit(form, {
target : [
{value : 'www.google.com'},
{value : 'search all'},
{value : 'GET'},
{value : ''},

]
});

const message = screen.getByTestId('message');
expect(message.textContent).toBe('www.google.com/search/all');

});
Here is the testcase .

Answer 5

Here is my component.
import React , {useState} from "react";
function UrlValidator(){
const [domain,setDomain] = useState("");
const [path,setPath] = useState("");
const [method,setMethod] = useState("GET");
const [body,setBody] = useState("");
const [message,setMessage] = useState("");
const [color,setColor] = useState('');
const urlPatternValidation = (Domain) => {
const regex = new RegExp('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?');
if(!Domain.includes('com')){
return false;
}
return regex.test(Domain);
};
const handleSubmit = (e)=>{
e.preventDefault();
if(!urlPatternValidation(domain)){
setMessage('Invalid URL!Please recheck your URL');
setColor('red');
}
else if(body && path){
setMessage(domain + '/'+ path.split(' ').join('/'));
setColor('#4EDD4D');
try{
var obj = JSON.parse(body);
var res = message + '?';
for(let key in obj){
res= res+ key+'='+obj[key];
}
if(!(method==="POST" || method==='PUT')){
setMessage(res);
}
}
catch(Exception){
setColor('red');
if (method==="POST" || method==='PUT'){
setMessage('Error in the body');
}
else{
setMessage('Error in the Body of the Query Params');
}
}
}
else if(path && body===""){
if (method==="POST" || method==='PUT'){
setColor('red');
setMessage('Error in body');
}
else{
setMessage(domain+ '/'+ path.split(' ').join('/'));
setColor('#4EDD4D');
}
}
else if(body===""){
if (method==="POST" || method==='PUT'){
setMessage('Error in body');
setColor('red');
}
}
}

Answer 6

I am taking from the input which will be the return statement of the component