How to pass list object to html string?

Question

The puzzle here that I am trying to solve is, how to show a list of items in another components as a string.html={listLocationsAsTextt} The end goal is to show that list each object in separate row as well. I am trying to use ReachTextFoldout component that needs html as string as it uses sanitized const sanitizedHTML = DOMPurify.sanitize(html, sanitizeConfig) . Could anyone see a way around this?

import React, { FC } from "react"
import * as S from "./styles/FeatureInfoStyles"
import * as T from "./types/FeaturedInfoTypes"

import RichTextFoldout from "components/molecules/richTextFoldout/RichTextFoldout"

const FeaturedInfo: FC<T.Props> = (p) => {
  const hasMoreThanThreeLocations = p.locations.length > 3

  const splitLocations = React.useCallback(() => {
    const maxLength = 3

    const firstThreeLocations = p.locations.slice(0, maxLength)
    const restLocations = p.locations.slice(maxLength, p.locations.length)

    return [firstThreeLocations, restLocations]
  }, [p.locations])

  const [firstThreeLocations, restLocations] = splitLocations()
  // Iterate over the locations and create a list of them
  const idontbelievethis = (
    <ul>
      {restLocations.map((location: any) => (
        <li key={location}>
          {location.city}, {location.state}, {location.country}.
        </li>
      ))}
    </ul>
  )

  const listLocationsAsTextt = `${`<p><strong>${idontbelievethis}</p>`}`

  return (
    <S.View>
      {p.category && <S.Detail>{p.category}</S.Detail>}
      {p.experienceLevel && <S.Detail>{p.experienceLevel}</S.Detail>}
      {p.employmentType && <S.Detail>{p.employmentType}</S.Detail>}
      {hasMoreThanThreeLocations ? (
        <S.Header>
          {firstThreeLocations.map(
            (location: any, index: React.Key | undefined) => (
              <li key={index}>
                {location.city}, {location.state}, {location.country}.
              </li>
            )
          )}

          <RichTextFoldout
            html={listLocationsAsTextt}
            bgColor={""}
            height={0}
            maxHeight={10}
          />
        </S.Header>
      ) : (
        <S.Header>
          {firstThreeLocations.map(
            (location: any, index: React.Key | undefined) => (
              <li key={index}>
                {location.city}, {location.state}, {location.country}.
              </li>
            )
          )}
        </S.Header>
      )}
    </S.View>
  )
}

export default FeaturedInfo

Reifocs · Accepted Answer · 2022-09-10 06:52:21Z

2

try this

import ReactDOMServer from 'react-dom/server';

// ...
const listLocationsAsText = ReactDOMServer.renderToStaticMarkup(
  <p>
    <strong>
      <ul>
        {restLocations.map((location: any) => (
          <li>
            {location.city}, {location.state}, {location.country}.
          </li>
        ))}
      </ul>
    </strong>
  </p>
);

answered Sep 10, 2022 at 6:52

Reifocs

7665 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Siouxx Over a year ago

Had to clean it out a bit as well.

const listLocationsAsText = ReactDOMServer.renderToStaticMarkup(     restLocations.map((location: any, index: React.Key | undefined) => (       <li key={index}>         {location.city}, {location.state}, {location.country}.       </li>     ))   )

Collectives™ on Stack Overflow

How to pass list object to html string?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related