Step 3: Create a Custom Card

Try searching “covid-19”. Right now, the FAQ returned displays without an answer.

To fix this, let’s make a custom card. We’ll use the StandardCard as our template for an FAQ card.

Duplicate the file, and name your new file FaqCard.tsx.
Replace all instances of StandardCard with FaqCard.

In the universalResultsConfig.ts

Import the FAQ Card:

import { FaqCard } from './components/cards/FaqCard';

Update the faqs CardComponent to FaqCard

faqs: {
label: 'FAQ',
viewAllButton: true,
cardConfig: {
 CardComponent: FaqCard,
 showOrdinal: false
}
},

In the FaqCard.tsx

Add the following interface:

export interface Faq {
name: string,
answer: string
}

In the FaqCard function, define an faq constant

const faq = result.rawData as unknown as Faq;

In your return statement, replace the references to the result.name and result.description with faq.name and faq.answer.

return (
 <div className={cssClasses.container}>
 <div className={cssClasses.header}>
   {configuration.showOrdinal && result.index && renderOrdinal(result.index)}
   {faq.name && renderTitle(faq.name)}
 </div>
 {(faq.answer ?? cta1 ?? cta2) &&
   <div className={cssClasses.body}>
     {faq.answer &&
     <div className={cssClasses.descriptionContainer}>
       <span>{faq.answer}</span>
     </div>}
     {renderCTAs(cta1, cta2)}
   </div>
 }
 </div>
);

You should now see the faq answer appear on the page!

Feedback

<% elem.innerText %>