How to use rich text answer field on pages?

Pages
1

I’d like to use the answerV2 field from the FAQ entity type on a page, but when it comes through the stream this is what I get
{
answerV2: { json: { root: [Object] } },
question: ‘How can I diversify my investment portfolio?’
}

when I look further into the JSON object it shows:

{
json: {
root: {
children: [Array],
direction: ‘ltr’,
format: ‘’,
indent: 0,
type: ‘root’,
version: 1
}
}
}
What do I need to add to render the actual text from this field?

2

Hi Michael,

You will need to use the LexicalRichText component, from our react-components library.

Usage below:

npm install:

npm i @yext/react-components

Component import:

import { LexicalRichText } from "@yext/react-components";

Component Usage:

<LexicalRichText serializedAST={JSON.stringify(c_[REPLACE ME WITH FIELD NAME].json)} />

Props interface below:

Prop Type Details
serializedAST string A JSON-serialized Lexical Dev AST.
nodeClassNames? EditorThemeClasses CSS Class names for the various Lexical Node types. Refer to Lexical theming documentation.
3

For more information on rendering rich text and markdown, check out this reference doc: