Question 60924 in Javascript Question posted in
A very good W3school tutorial can be found here.

Show message if customer not found – Javascript

I want to display a "not found" text when I try to search for a customer that doesn’t exist.
enter image description here

Customers.jsx

import { getAllCustomers, reset } from "../../../../features/customers/customerSlice";
import Search from "./Search";

const Customers = ({ title, captions, isLoading }) => {;

  const dispatch = useDispatch();
  const navigate = useNavigate();
  
  const { customers, isError, message, meta } = useSelector(
    (store) => store.customer
  );
  
  return (
    <Table variant="simple" color={textColor}>
        <Tbody>
           {customers.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((customers) => {
           return (
            <CustomersTable
              key={customers.uid}
              name={`${customers.first_name} ${customers.last_name}`}
              logo={customers.logo}
              id={customers.uid}
              exchange={customers.exchange}
  )
Tags:

2

Answers


  1. 0

    We call this a conditional rendering, it means rendering components depending on if-else statement.

    Here in your question you want to show User not found if customers undefined otherwise show the data in the body table, so inside the body of the table component you can do this:

    <Tbody>
 {
    // here we are checking if the customers array is not empty
    arr.slice(0,0).length > 0 ?
      // if the customers not empty print your data table component
      arr.slice(0,2).map((item) => "your component with the data")
      //otherwise return not found
      : "Not found"
  }
</Tbody>
    Login or Signup to reply.
  2. 0

    you can use ternary operator if customer not found. but first of all you must check customer length.

    this is example usage for ternary operator

    customers.length > 0 ? <TableComponent /> : <div>Customer Not Found</div>

    so you can implement into your code like this

    import { getAllCustomers, reset } from "../../../../features/customers/customerSlice";
import Search from "./Search";

const Customers = ({ title, captions, isLoading }) => {

  const dispatch = useDispatch();
  const navigate = useNavigate();
  
  const { customers, isError, message, meta } = useSelector(
    (store) => store.customer
  );
  
  return (
    <Table variant="simple" color={textColor}>
        <Tbody>
           {
                customers.length > 0 ?
                customers.slice(page * rowsPerPage, page * rowsPerPage + 
                rowsPerPage).map((customers) => {
                return (
                <CustomersTable
                    key={customers.uid}
                    name={`${customers.first_name} ${customers.last_name}`}
                    logo={customers.logo}
                    id={customers.uid}
                    exchange={customers.exchange} />
                   ) 
                } 
                : <div> Customer not found </div>
           }
        </Tbody>
    </Table>
  )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search