Contentful logo

Contentful Community

Error handling custom entry editor

Hi,
I’m trying to build my own entry editor. I used React component as bellow.

const Entry = (props: EditorProps) => {
  const { sdk } = props;
  const contentFieldName = sdk.entry.fields['name'];
  const contentFieldPrice = sdk.entry.fields['price'];
  const [name, setName] = useState(contentFieldName.getValue() || '');
  const [price, setPrice] = useState(contentFieldPrice.getValue() || '');
  function updateName(e: any) {
    const val = e.target.value
    setName(val)
    contentFieldName.setValue(val)
  }
  function updatePrice(e: any) {
    const val = e.target.value
    setPrice(val)
    contentFieldPrice.setValue(parseInt(val))
  }
  return (
    <>
      <TextInput
        labelText="Product name"
        required
        name="name"
        id="name"
        value={name}
        onChange={updateName}
      />
      <TextInput
        labelText="Product price"
        required
        name="price"
        id="price"
        value={price}
        onChange={updatePrice}
      />
    </>
  );
};

Everything is worked well. I can edit and save the entry.
My problem is when I save the entry with invalid data. Ex name field is empty. It shows notice " Error publishing: Validation failed. Please check the individual fields for errors."
I want to show more details to user. Ex which field is invalid, error message …
I see in Chrome Devtool, when I click Publish button, it requests PUT API “spaces/xxxxxxxxxxxx/entries/xxxxxxxxxxxxxxxxxx/published” and it returns 422 status with validation error details.
My question is how can I get error message into my react component?