New div doesn't apear after submit React - reactjs

Question

I have form in react:
let isSubmitted = false
const {
register,
errors,
handleSubmit
} = useForm < FormInput > ()
const onSubmit = (data: FormInput) => {
axios
.post(endpoint, data, {
headers: {
'Content-Type': 'application/json'
}
})
.then(res => {
isSubmitted = true
})
.catch(err => {})
}
return (
<div>
<div>
<div>
<form className={classes.root} autoComplete="off">
<Grid style={formGrid} container>
<Grid item xs={6}>
<div style={formItem}>
<input style={inputStyle} placeholder="Name of Provider" name="provider" type="text" ref={register({ required: true })} />
<div style={erroStyle}>{errors.Provider && 'Provider is required'}</div>
</div>
<div style={formItem}>
<input placeholder="Name of Contact Person" name="contactPerson" ref={register({ required: true })} style={inputStyle} />
<div style={erroStyle}>{errors.ContactPerson && 'Contact person is required'}</div>
</div>
<div style={formItem}>
<input placeholder="Contact Email" name="email" ref={register({ required: true })} style={inputStyle} />
<div style={erroStyle}>{errors.Email && 'Contact email is required'}</div>
</div>
<input onClick={handleSubmit(onSubmit)} type="submit" style={submitStyle} />
</Grid>
<Grid item xs={6}>
<div style={formItem}>
<input placeholder="Address (optional)" required name="address" style={inputStyle} ref={register} />
</div>
</Grid>
{isSubmitted &&
<div>Thank you! Form submitted, we'll contact you shortly.</div>}
</Grid>
</form>
</div>
</div>
</div>
) }
on submit I want to show this div: {isSubmitted && <div>Thank you! Form submitted, we'll contact you shortly.</div>} however it doesn't appear. I'm new to react and I'm looking from angular perspective and if it was angular it would work :) what I am missing here?

Answer 1

React will only re-render your component if the state has changed, any update on a variable will not trigger a re-render.
Assuming you are using a function component, you have to use the useState hook to allow your component to re-render:
import React, { useState } from 'react';
// --- snip ---
const [isSubmitted, setIsSubmitted] = useState(false);
const {
register,
errors,
handleSubmit
} = useForm < FormInput > ()
const onSubmit = (data: FormInput) => {
axios
.post(endpoint, data, {
headers: {
'Content-Type': 'application/json'
}
})
.then(res => {
setIsSubmitted(true)
})
.catch(err => {})
}