How to customize error messages in React?

I'm implemting ther error handeling for an file upload in react. But i struggle with handeling the different types of errors and error messages.

In the application there can be thee errors and error messages when uploading a file, some are caught by react and some are caught by django (backend):

1. The file upload field is not filled by the user: in this case the error is caught by react and the message is : "The submitted data was not a file. Check the encoding type on the form".
2. The file upload is not an audio file: The Error is caught by a validator in the django backend and the message is: "Unsupported file type. Supported story file types are .mp3, .wav and .mp4"
3. The file is to big for uploading: The Error is caught by an validator the backend and the message is: "Audio file exeeds 200 MB"

Particularly for the first error in react i.e., when the file upload field is not filled there should be an error message saying something like "this field can not stay empty please provide an audio file".

• Concrete Question: How do I manage the customization of this error message in react? If I just provide a hard coded message, the backend messages regarding file type and file seize are not displayed.

• General Question: I manage some errors in the backend with django some in the frontend with react. Is there a best practice, that either everything should be managed in the backend or frontend.

Component Story

  onSubmit = e => {
  e.preventDefault();
  let { title, content, audio} = this.state;
  let formDataStory = new FormData(); // create form formData
  formDataStory.append('audio', audio); // add audio to formData
  formDataStory.append('title', title); // add title to formData
  formDataStory.append('content', content); // add content to formData
  this.props.addStory(formDataStory) // call addStory function with formDataStory as Input to create new Story
      .then(() => {
        this.setState({
          title: "", // clear title field after submission
          content:"", // clear content field after submission
        });
        this.inputRef.current.value = ''; // clear file field after submission 
      }) 
};

Action Story

// ADD Story
 export const addStory = formDataStory => (dispatch, getState) =>
new Promise((resolve, reject) => {
  axios.post(apiBase +"/story/", formDataStory, tokenConfig(getState) )
    .then(res => {
      dispatch(createMessage({ addStory: "Story Added" }));
      dispatch({
        type: ADD_STORY,
        payload: res.data
      });
      resolve(res);
    })
    .catch(err => {
      reject(err);
      dispatch(returnErrors(err.response.data, err.response.status))
    }
  );
});

Error Story

componentDidUpdate(prevProps) {
    const { error, alert, message } = this.props;
    if (error !== prevProps.error) {
      if (error.msg.title) alert.error(`Please provide a title to your story`); // 
      if (error.msg.content) alert.error(`Please provide a short description to your story`);
      if (error.msg.audio) alert.error(`Audio: ${error.msg.audio.join()}`);
    }

    if (message !== prevProps.message) {
      if (message.addStory) alert.success(message.addStory);
    }
  }

  render() {
    return <Fragment />;
  }
}

Thanks a lot!