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

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?

CodePudding user response：

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>
  );
}

CodePudding user response：

     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>
                        )}

CodePudding user response：

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>
    )}

CodePudding user response：

 <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>
                )}