ReactJS: Map Function Inside Ternary Operator

Question

Sorry if this is a simple question but I have a data state in ReactJS that contains an array from an API fetch request.

In my return() I have a ternary operator that displays a loading spinner if the data does not exist and when it does I have .map() to iterate over the data state but its not working as expected and Im getting errors.

  return (
    <>
      <table className="table is-hoverable is-striped is-fullwidth">
        <thead>
          <tr>
            <th>Task</th>
            <th>Assignees</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          {loading ? (
            <tr>
              <td>
                <div className="has-text-centered">{loadingSpinner}</div>
              </td>
              <td>
                <div className="has-text-centered">{loadingSpinner}</div>
              </td>
              <td>
                <div className="has-text-centered">{loadingSpinner}</div>
              </td>
            </tr>
          ) : (
            {data.map((row) => {
              return (
                <tr>
                  <td>{row.Task}</td>
                  <td>
                    {row.AssigneeUser} & {row.AssigneeUser2}
                  </td>
                  <td>{row.TaskDate}</td>
                </tr>
              );
            })}
          )}
        </tbody>
      </table>
    </>
  );

I can use data.map() without the ternary operator perfectly fine.

Any ideas?

TIA

Answer 1

You just need to remove extra {} before data.map

Try something like below:-

<tbody>
          {loading ? (
            <tr>
              <td>
                <div className="has-text-centered">{loadingSpinner}</div>
              </td>
              <td>
                <div className="has-text-centered">{loadingSpinner}</div>
              </td>
              <td>
                <div className="has-text-centered">{loadingSpinner}</div>
              </td>
            </tr>
          ) : (
            data.map((row) => {
              return (
                <tr>
                  <td>{row.Task}</td>
                  <td>
                    {row.AssigneeUser} & {row.AssigneeUser2}
                  </td>
                  <td>{row.TaskDate}</td>
                </tr>
              );
            })
          )}
        </tbody>