Блог

Следующий код предназначен для извлечения сведений о компании из MongoDB и отображения их в табличном формате. Кроме того, я разместил строку поиска, в которой можно искать компанию по названию компании, я использовал крючки react для реализации этой функции. Я хочу знать, как отображать сообщение об ошибке при неверном поиске вместо отображения пустой таблицы всякий раз, когда выполняется неверный поиск.

 import React, {useEffect, useState}  from "react";
import GridWrapper from "../helpers/gridWrapper";
import ContentWrapper from "../helpers/contentWrapper";
import Popup from "./contacts/popupTemplate";
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
import ViewIcon from "@material-ui/icons/EditOutlined";
import "./stylesheets/contacts.css"
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { getCompanies } from "../redux/actions/companyAction";


const Contacts = () => {

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getCompanies());
  },[dispatch]);

  const { companies } = useSelector(state => state.companies);
  //for popup management
  const [buttonPopup, openPopup] = useState(false);
  let count = 1;

  const[search, setSearch] = useState("");

  const filteredCompanies = companies.filter(company=>{
    return company.companyName.toLowerCase().includes(search.toLowerCase())
  })

return (
    <GridWrapper>
      <ContentWrapper>
        <div>
          <input 
            type="text" 
            placeholder="Search Contacts" 
            class="boxContainer"
            onChange={e => setSearch(e.target.value)}>
          </input>
        </div> 

          <Popup trigger={buttonPopup} setTrigger={openPopup}>

            <div className="row">
              <div className="column1">
                <h4>
                  Details of Client
                </h4>
                <div className="column1-part1">
                  <div className="column1-part1-column">
                    Id : 10235
                    <br></br>
                    Name : John Smith
                    <br></br>
                    Company Name : Company ABC
                  </div>
                  <div className="column1-part1-column2">
                    Contact Number : 0774410398
                    <br></br>
                    Company Telephone : 0112937148
                    <br></br>
                    Email : example@gmail.com
                  </div>
                </div>
                <div className="column1-part2">
                    Client Job : Sales Head
                    <br></br>
                    Client NIC : 1958426712V
                    <br></br>
                    Client Address : No 15, First lane, Colombo
                    <br></br>
                    Client DOB : 25th June 2021
                    <br></br>
                    Client Gender : Male
                </div>
                <div className="column1-part3">
                    Company Address : No 15, First lane, Colombo
                    <br></br>
                    Company Registration Number : 256364125895
                </div>
              </div>
              <div className="column2">
                <button className="ClientEditBtn">
                  <EditIcon></EditIcon>
                </button>
                <button className="ClientDeleteBtn">
                  <DeleteIcon></DeleteIcon>
                </button>
                <h5>
                  Current Projects
                </h5>
                <p>
                  Project 1 - 25/06/2021
                  <br></br>
                  Project 256 - 27/06/2022
                  <br></br>
                  Project 256 - 27/06/2022
                  <br></br>
                  Project 256 - 27/06/2022
                </p>
              </div>
            </div>

          </Popup>


          <div class="table-box">
            <table>
              <thead>
              <tr>
                <th>No.</th>
                <th>Registration No.</th>
                <th>Company Name</th>
                <th>Company Address</th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              {filteredCompanies.map(company =>(
                <tr>
                  <td>{count  }</td>
                  <td>{company.companyRegNumber}</td>
                  <td>{company.companyName}</td>
                  <td>{company.companyAddress}</td>
                  <td><button onClick={() => openPopup(true)}  class="btn-view"><ViewIcon/>View</button></td>
              </tr>
              ))}
              </tbody>
            </table>
          </div>
      </ContentWrapper>
    </GridWrapper>
  );
};

export default Contacts;
 

Если вы возьмете этот фрагмент из своего jsx:

     <tbody>
                  {filteredCompanies.map(company =>(
                    <tr>
                      <td>{count  }</td>
                      <td>{company.companyRegNumber}</td>
                      <td>{company.companyName}</td>
                      <td>{company.companyAddress}</td>
                      <td><button onClick={() => openPopup(true)}  class="btn-view"><ViewIcon/>View</button></td>
                  </tr>
                  ))}
                  </tbody>
 

Вы можете изменить это так, что-то вроде этого:

 {filteredCompanies?.length >0? 
 <tbody>
              {filteredCompanies.map(company =>(
                <tr>
                  <td>{count  }</td>
                  <td>{company.companyRegNumber}</td>
                  <td>{company.companyName}</td>
                  <td>{company.companyAddress}</td>
                  <td><button onClick={() => openPopup(true)}  class="btn-view"><ViewIcon/>View</button></td>
              </tr>
              ))}
              </tbody>
              : <div> <i>No companies found.</i> </div>}
 

Встроенное условие либо отобразит ваши tbody , если отфильтрованные компании не пусты, либо отобразит "No companies found" сообщение.