ChiarosPB

data.results is undefined

Mar 14th, 2023
58
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. page.tsx:
  2.  
  3. import SearchResults, {
  4.   Response,
  5. } from "../components/search-results/SearchResults";
  6. import styles from "./page.module.scss";
  7. import Image from "next/image";
  8. import { use } from "react";
  9.  
  10. export interface ResultsProps {
  11.   searchResults: Response[];
  12. }
  13.  
  14. async function search() {
  15.   let res = await fetch(
  16.     `http://address/api/Search?searchString=figma`
  17.   );
  18.   console.log("Response " + res);
  19.   return res;
  20. }
  21.  
  22. function Results({ searchResults }: ResultsProps) {
  23.   let { data } = use(search());
  24.   console.log("DATA " + data);
  25.   return (
  26.     <main>
  27.       {searchResults != null && searchResults.length !== 0 ? (
  28.         <>
  29.           <h1>{searchResults.length} Colleagues are found!</h1>
  30.           <hr />
  31.           <SearchResults data={data} />
  32.         </>
  33.       ) : (
  34.         <>
  35.           <h1>No one is found!</h1>
  36.           <hr />
  37.           <Image
  38.             className={styles.noResultsImage}
  39.             src="./assets/no-results.svg"
  40.             alt="No one is found!"
  41.             width={500}
  42.             height={500}
  43.           />
  44.         </>
  45.       )}
  46.     </main>
  47.   );
  48. }
  49.  
  50. export default Results;
  51.  
  52. component.tsx:
  53.  
  54. "use client";
  55.  
  56. import React from "react";
  57. import SearchCard from "../search-card/SearchCard";
  58. import styles from "./SearchResults.module.scss";
  59.  
  60. export interface SearchResult {
  61.   skillName: string;
  62.   skillLevel: number;
  63.   lastUsed: string;
  64.   comment: string;
  65.   userName: string;
  66.   userTitle: string;
  67.   userPFP: string;
  68. }
  69.  
  70. export interface Response {
  71.   category: string;
  72.   results: SearchResult[];
  73. }
  74.  
  75. export interface SearchResultsProps {
  76.   data: Response[];
  77. }
  78.  
  79. const SearchResults = ({ data }: SearchResultsProps) => {
  80.   return (
  81.     <div>
  82.       {data.map((i, index) => (
  83.         <div key={index}>
  84.           <h2>{i.category}</h2>
  85.           {i.results.map((r, resultIndex) => (
  86.             <SearchCard
  87.               key={`result.${index}.${resultIndex}`}
  88.               skillName={r.skillName}
  89.               skillLevel={r.skillLevel}
  90.               lastUsed={r.lastUsed}
  91.               comment={r.comment}
  92.               userName={r.userName}
  93.               userTitle={r.userTitle}
  94.               userPFP={r.userPFP}
  95.             />
  96.           ))}
  97.         </div>
  98.       ))}
  99.     </div>
  100.   );
  101. };
  102.  
  103. export default SearchResults;
  104.  
Tags: react Next.js
Advertisement
Add Comment
Please, Sign In to add comment