React array map to list fails without error warning

I have searched through all answers on Stack Overflow for a solution to my problem. I am just stuck because there isn't any error message in the console. I believe there is a bug which I cannot identify. Can you assist further?

I use jQuery because I am more familiar with it and it's ease of accomplishing the same goal. Any alternative, ES6 will also be OK so far I can move forward.

Below is the code.

All console.logs are OK, but the list comes out empty.

import { useState, useEffect } from 'react';
import $ from 'jquery';

const PerformanceRecord = (props) => {
    const [performanceRecord, setPerformanceRecord] = useState([]);

    useEffect(() => {
        try {
            $.post('php/study_room/get_performance_record.php', () => {
            }).done((data) => {
                console.log(data); //This works fine
                setPerformanceRecord(JSON.parse(data));
                console.log(JSON.parse(data)); //This works fine
            }).fail((xhr) => {
                alert(`An error ${xhr.statusText} has occurred`);
            });
        } catch (error) {
              alert(`An error ${error} has occurred. Please try later`);
        };
    }, []);

    // performanceRecord is an array of records. Each record is also an array of elements
    const records = performanceRecord.map((record, index) => {
        <li key={index}>
            <span key={0}>{record[0]}</span>
            <span key={1}>{record[1]}</span>
            <span key={2}>{record[2]}</span>
            <span key={3}>{record[3]}</span>
            <span key={4}>{record[4]}</span>
        </li>
    });

    const printHandlder = () => console.log('Use your browser print');

    return (
        <div id="record">
            <h3>User Record</h3>
            <ol>
                {records}
            </ol>
        </div>
    )
};

export default PerformanceRecord;

The map function should return the JSX elements that you want to render. Without the return statement, the mapping operation won't produce the desired result.

const records = performanceRecord.map((record, index) => {
   return (
    <li key={index}>
      <span key={0}>{record[0]}</span>
      <span key={1}>{record[1]}</span>
      <span key={2}>{record[2]}</span>
      <span key={3}>{record[3]}</span>
      <span key={4}>{record[4]}</span>
    </li>
  );
});

When you use curly braces in an arrow function, you are defining a block of code that may contain multiple statements. In this case, the arrow function is not an implicit return function, so you need to explicitly specify what value to return from the function using the return keyword. If you don't include a return statement in the block, the function will not return anything (i.e., it will return undefined). The below code would work.

const records = performanceRecord.map((record, index) => {
   return (
    <li key={index}>
      <span key={0}>{record[0]}</span>
      <span key={1}>{record[1]}</span>
      <span key={2}>{record[2]}</span>
      <span key={3}>{record[3]}</span>
      <span key={4}>{record[4]}</span>
    </li>
  );
});

Alternatively, as in your case, since you are having only a single JSX element which returns the list, you can enclose them in parenthesis () instead of curly braces and avoid using the return keyword.

const records = performanceRecord.map((record, index) => (
    <li key={index}>
        <span key={0}>{record[0]}</span>
        <span key={1}>{record[1]}</span>
        <span key={2}>{record[2]}</span>
        <span key={3}>{record[3]}</span>
        <span key={4}>{record[4]}</span>
    </li>
));

The parentheses around the JSX implicitly return the li element from the map function. This syntax is often used when the JSX is short and can fit on a single line.