As I pointed out in the comment, you should change the function to store the error state, and change the rendering function to show that.

const File history = () => {
   const [tableData, setTableData] = useState([]);
   const [isVisible, setIsVisible] = useState(true);
   const [errorMessage, setErrorMessage] = useState('');
   const getFileHistoryData = async() => {
    try {
      const response = await axios.get("api");
      const data = await response.data;
      setErrorMessage('');
      if (data.length > 0) {
        setTableData(response.data);
      }
    } catch (e) {
      console.log(e.message)
      setErrorMessage(e.message);
    }
  };
  const renderErrorMessage = () => {
    return(
      <div>
         {errorMessage !== '' && (
             <h1>{'Something went wrong: + errorMessage}</h1>
         }}
      </div>
    )
}
  return (
      <div>
         {renderErrorMessage()}
         <MyTableComponent/>
      </div>  
     );
}

You could modify your code as such :

import React, { Component } from 'react',
import axios from 'axios',
import MyTableComponent from 'YOUR_PATH_TO_THIS_COMPONENT',

class File extends Component {
  state = {
    tableData : [],
    isVisible : true,
    errorMessage : '',
  }
  
  componentDidMount = () => {
    axios.get("api")
      .then(response => {
        const fileDataHistory = Object.values(response.data);
        if (data.length > 0) {
          this.setState({
            tableData:fileDataHistory,
          });
        }
      }
      .catch(error => {
        console.log(error);
        this.setState({
          errorMessage:error,
        });
  };
  
  renderErrorMessage = () => {
    return(
      <div>
         {this.state.errorMessage !== '' &&
             <h1>{'Something went wrong:' + this.state.errorMessage}</h1>
         }
      </div>
    )
  };
  
  render() {
    return (
      <div>
         {this.renderErrorMessage()}
         <MyTableComponent/>
      </div> 
    )
  }
};

You could use a state to store the error message when an error occurs and, use that value to display the error message. Instead of checking if the error message exists in the message rendering function, you could alternatively also use && operator to render the message conditionally.

const File history = () => {
   const [tableData, setTableData] = useState([]);
   const [isVisible, setIsVisible] = useState(true);
   const [errorMessage, setErrorMessage] = useState('');
   const getFileHistoryData = async() => {
    try {
      const response = await axios.get("api");
      const data = await response.data;
      setErrorMessage('');
      if (data.length > 0) {
        setTableData(response.data);
      }
    } catch (e) {
      console.log(e.message)
      setErrorMessage(e.message);
    }
  };
  const renderErrorMessage = () => {
    return(
      <div>
             <h1>{`Something went wrong: ${errorMessage}`}</h1>
      </div>
    )
}
  return (
      <div>
         {errorMessage.length && renderErrorMessage()}
         <MyTableComponent/>
      </div>  
     );
}