ReactJs MaterialUi onRowUpdate field validation - reactjs

Question

I have a MaterialTable and I want to validate the fields when editing a line.
For example the following code:
https://codesandbox.io/s/broken-snow-i4jbi?fontsize=14&hidenavigation=1&theme=dark
I have the function setNameError
const [nameError, setNameError] = useState({
error: false,
label: '',
helperText: '',
});
Then the onRowUpdate:
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
if(newData.name === '') {
setNameError({
error: true,
label: 'required',
helperText: 'Required helper text'
});
reject();
return;
}
resolve();
...
}, 600);
})
I want to validate if the field name is empty, if it is empty I want to have this aspect:
validation in the field after click Save button
I can't show the error label, it looks like the setNameError inside the Promise is not working and I don't understand how can I do this.

Answer 1

Found the problem
I was storing the columns in state
const [state, setState] = React.useState({
columns: [
{ title: 'Name', field: 'name',
editComponent: props => (
<TextField
type="text"
required={true}
error = {nameError.error}
label = {nameError.label}
helperText = {nameError.helperText}
value={props.value ? props.value : '' }
onChange={e => props.onChange(e.target.value)}
/>
)
},
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
],
data: [
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{
name: 'Zerya Betül',
surname: 'Baran',
birthYear: 2017,
birthCity: 34,
},
],
});
And then passing the state.columns to the MaterialTable component:
<MaterialTable
title="Editable Example"
columns={state.columns}
data={state.data}
...
The solution was to put the columns definition in the MaterialTable component:
return (
<MaterialTable
title="Editable Example"
columns= {[
{ title: 'Name', field: 'name',
editComponent: props => (
<TextField
type="text"
required={true}
error = {nameError.error}
label = {nameError.label}
helperText = {nameError.helperText}
value={props.value ? props.value : '' }
onChange={e => props.onChange(e.target.value)}
/>
)
},
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
]}
data={state.data}
...