Question 198108 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – react array map to list fails without error warning

I have searched through all answers in stackoverflow for a solution to my problem. I am just stuck because there is no 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 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;
Tags:

3

Answers


  1. 0

    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>
  );
});
    Login or Signup to reply.
  2. 0

    Based on the code you provided, there seems to be an issue with the mapping of the performanceRecord array in the component. The problem is that you’re not returning the JSX elements within the map function.

    To fix this, you need to add a return statement before the <li> element in the map callback. Here’s the updated code:

    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, you can use implicit return by removing the curly braces {} and adding parentheses () around the JSX 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>
));

    By making this change, the records array will contain the mapped JSX elements, and they should render correctly within the <ol> element in your component.

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search