My function does not render the data I supply to it. What do I do?

I am trying to write a table that should be writing out properties of an object in React. For some unknown reason I cannot get it to produce any output.

const renderItem = (item) => {
  return (
<div>

  {Object.entries(item).map(([key, value]) => 
          {console.log(value)}
    (
 *variations in next segment    
 )
</div>

*in this line I tried:

1. <td key={key}>{value}</td> // with <tr></tr> instead of wrapping <div> elements as shown above
2. <td>{value}</td>
3. <p> Test </p> // wrapped in <div> elements

The console.log(value) returns all the values it should so I know I supply the data correctly and it is iterating through the array as it should but somehow I cannot get it to produce any output inside of ().

I tried playing with many different variations, thought the problem might be in css but that is also not the case. I tried outputing data also simply in <div> or <p>, I tried moving the function to a whole new file, but nothing.

EDIT. Here is more info:

My main App.js:

import './App.css';
import HierarchyTable from './components/HierarchyTable.js';
import exampleData from './data/example.json';

function App() {

  return (
    <div className="App">
      <HierarchyTable datafed={exampleData} ></HierarchyTable>
    </div>
  );
}

export default App;

My HierarchyTable.js

import React, { useState } from 'react';
import '../App.css'; 

export default function HierarchyTable({datafed}) {
  const [data, setData] = useState(datafed)

  const renderTable = (item) => {
    return(
    Object.entries(item).map(([key, value]) => {
     
        if (key !== "children"){
          renderItem(value)
        }
        else {
          renderTable(value)
        }
      }
    )
   )
  };

  function renderItem (item) {
  return Object.entries(item).map(([key, value]) => { 
    
      return (<tr><td key={key}>{value}</td></tr>)
      
    }
    )}
 
  return (
   <div>
   
    <table>
      <thead> 
        <tr>
             {Object.entries(data[0].data).map(([key, value]) => ( 
              <th 
              // className = "HeaderItem"
              >{key}</th>
          )
          )}
        </tr>
        </thead>
        
       <tbody>
       {data.map((item) => renderTable(item))}
      </tbody>
      <tfoot>
   
  </tfoot>
   </table>
      </div>
  );
}

I tried doing it in many different variatons. The renderItem function gets the data I need as I can console.log it but it does not output the html elements as it should. It breaks my spirit.

You need to properly return something from the map function:

const renderItem = (item) => {
  return (
<div>
  {Object.entries(item).map(([key, value]) => {
        console.log(value)
        return value
        //or return (<p>{value}</p>)
    })}
</div>
)

You most likely confused the shorthand map function that looks like data.map(value => (value))

If you use brackets {}, you need to specifically return something with "return". If you use (value) only, it is short from {return value}