How can I display a div tag after a condition is completed?

user_18277928 0
Viewed 62

What I'm trying to do is to display a message in a div tag, when the table is empty. Also, I show a circle when data is shown in the table, making that process button when it's delayed when the page is rendered? The problem is when there is no data in the table, the circle keeps showing and doesn't go off. I have put a condition if list.length > 0 shows the result and the circle.

          <tbody>
                {list?.length > 0 ? (
                  list?.map((list) => (
                    <tr key={list.id}>
                      <td >
                        <div>
                          {list.id}
                        </div>
                      </td>
                      <td >
                        <div>
                          {list.name}
                        </div>
                      </td>
                      <td>
                        <div>
                          {list.created}
                        </div>
                      </td>
                    
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={6}>
                      <div>
                        <svg
                          xmlns="http://www.w.org/200/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <circle
                            className="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            strokeWidth="4"
                          ></circle>
                        </svg>
                      </div>
                    </td>
                  </tr>
                )}

How can I make it not show the circle when the table is empty, and also to display a "message" let's say, in a div tag?

reactjs html
4 Answers

I suppose you fetching data. If you fetching data you need to use another state to store loading state:

const [loading, toggleLoading] = useState(false);

Full example:

import { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
  const [list, setList] = useState([]);
  const [loading, toggleLoading] = useState(false);

  useEffect(() => {
    toggleLoading(true);
    // axios or fetch
    axios.get("api url").then((list) => {
      toggleLoading(false);
      setList(list);
    });
  }, []);

  return (
    <div>
      {!loading &&
        list.length > 0 &&
        list?.map((list) => (
          <tr key={list.id}>
            <td>
              <div>{list.id}</div>
            </td>
            <td>
              <div>{list.name}</div>
            </td>
            <td>
              <div>{list.created}</div>
            </td>
          </tr>
        ))}
      {loading && (
        <svg xmlns="http://www.w.org/200/svg" fill="none" viewBox="0 0 24 24">
          <circle
            className="opacity-25"
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            strokeWidth="4"
          ></circle>
        </svg>
      )}
    </div>
  );
}
user_86605270 
     const [loading , setLoading] = useState(false)
    useEffect(
setTimeout(
if(list.length > 0 ) {
             <svg
                                  xmlns="http://www.w.org/200/svg"
                                  fill="none"
                                  viewBox="0 0 24 24"
                                >
                                  <circle
                                    className="opacity-25"
                                    cx="12"
                                    cy="12"
                                    r="10"
                                    stroke="currentColor"
                                    strokeWidth="4"
                                  ></circle>
                                </svg>
        }    
    ) , [2000]
      
)
    
         <tbody>
                        {list?.length > 0 ? (
                          list?.map((list) => (
                            <tr key={list.id}>
                              <td >
                                <div>
                                  {list.id}
                                </div>
                              </td>
                              <td >
                                <div>
                                  {list.name}
                                </div>
                              </td>
                              <td>
                                <div>
                                  {list.created}
                                </div>
                              </td>
                            
                            </tr>
                          ))
                        ) : (
                          <div>NO data left</div>
                        )}
user_174079740

How about adding another condition, first check if list is defined, if not show loading circle. If list is defined check if the length is more than 0 if not show the message.

{list ? list?.length > 0 ? <Show list here> : <List is empty> : <List is loading>

<tbody>
    {list ? list?.length > 0 ? (
        list?.map((list) => (
        <tr key={list.id}>
            <td >
            <div>
                {list.id}
            </div>
            </td>
            <td >
            <div>
                {list.name}
            </div>
            </td>
            <td>
            <div>
                {list.created}
            </div>
            </td>
        
        </tr>
        ))
    ): <div>List is empty</div> : (
        <tr>
        <td colSpan={6}>
            <div>
            <svg
                xmlns="http://www.w.org/200/svg"
                fill="none"
                viewBox="0 0 24 24"
            >
                <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="4"
                ></circle>
            </svg>
            </div>
        </td>
        </tr>
    )}
user_111964410 
 <tbody>
                {list?.length > 0 ? (
                  list?.map((list) => (
                    <tr key={list.id}>
                      <td >
                        <div>
                          {list.id}
                        </div>
                      </td>
                      <td >
                        <div>
                          {list.name}
                        </div>
                      </td>
                      <td>
                        <div>
                          {list.created}
                        </div>
                      </td>
                    
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={6}>
                      <div>
                        <svg
                          xmlns="http://www.w.org/200/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          {
                            list?.length > 0&&<circle
                            className="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            strokeWidth="4"
                          ></circle>}
                        </svg>
                      </div>
                    </td>
                  </tr>
                )}
user_151162070
Related