отображение значка в зависимости от типа файла

#reactjs #axios #rendering

Вопрос:

Я хочу отображать значки в зависимости от типа файла. Из объекта, который я извлекаю из strapi, я могу получить расширение файла. Но я хочу, чтобы он отображался динамически на столе.

 const TableData = () =gt; {  const [data, setData] = useState([]);   const getData = () =gt; {  axios.get("http://localhost:1337/document-uploads").then((response) =gt; {  console.log(response);  const myData = response.data;  setData(myData);  });  };   useEffect(() =gt; getData(), []);   return (  lt;div className="my-5"gt;  lt;Table striped bordered hovergt;  lt;theadgt;  lt;trgt;  lt;thgt;Iconlt;/thgt;  lt;thgt;File Namelt;/thgt;  lt;thgt;Descriptionlt;/thgt;  lt;thgt;Authorlt;/thgt;  lt;thgt;Date createdlt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  {data amp;amp;  data.map((file: File) =gt; (  lt;tr key={file.id}gt;  lt;tdgt;  {() =gt; {  if (file.document.ext == ".pdf") {  return lt;img src={PDF} /gt;;  } else if (file.document.ext == ".xml") {  return lt;XML /gt;;  } else {  return lt;JPEG /gt;;  }  }}  lt;/tdgt;  lt;tdgt;{file.document.name}lt;/tdgt;  lt;tdgt;{file.description}lt;/tdgt;  lt;tdgt;{file.author}lt;/tdgt;  lt;tdgt;{file.created_at}lt;/tdgt;  lt;/trgt;  ))}  lt;/tbodygt;  lt;/Tablegt;  lt;/divgt;  ); };  export default TableData;  

Я получаю сообщение об ошибке: «Предупреждение: Функции недопустимы в качестве дочернего элемента React. Это может произойти, если вы вернете компонент вместо отрисовки. Или, может быть, вы хотели вызвать эту функцию, а не возвращать ее».