@react-pdf/renderer unable to use any react components inside that

Question

In reactJS my requirement is to save PDF file of some images, contents, charts and so on. For that when I tested with below programming I unable to use any reactJS components and I can able to only use {Page, Text, View, Document, StyleSheet, Image} under @react-pdf/renderer. But my requirement to use all components. Kindly letme know any possible methods to run other components like <Text>,<p> inside PdfDocument.

MovieList.jsx

import React, { useState } from "react";
import { PDFDownloadLink } from "@react-pdf/renderer";
import { PdfDocument } from "./Umovie";


export default function MovieList() {
  const [data, setData] = useState([]);
  const [show, setHide] = useState(false)


  const OnGeneratePDF = async e => {
    try {
      setHide(true)
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className="container">
      <h2>Best movies of the year</h2>
      <button onClick={OnGeneratePDF}>GeneratePDF</button>

      {show &&<PDFDownloadLink
        document={<PdfDocument data={data} />}
        fileName="movielist.pdf"
        style={{
          textDecoration: "none",
          padding: "10px",
          color: "#4a4a4a",
          backgroundColor: "#f2f2f2",
          border: "1px solid #4a4a4a"
        }}
      >
        {({ blob, url, loading, error }) =>
          loading ? "Loading document..." : "Download Pdf"
        }
      </PDFDownloadLink>}
    </div>
  );
}

Umovie.jsx

import React from "react";
import {Page,Text,View,Document,StyleSheet,Image} from "@react-pdf/renderer";

export function PdfDocument(props) {
    console.log("pdf props", props.data);
    return (
        <Document>
            <Page style={styles.page} type="portrait">
                {props.data
                    ? <View  style={styles.movieContainer}>
                        <View  style={styles.movieDetails}>
                        <Text style={styles.Title}>Uday Test Title</Text>
                        </View>
                        <View style={styles.overviewContainer}>
                            <p>Hi Hello How areyou</p>
                        </View>
                    </View>
            : ""}
            </Page>
        </Document>
    );
}

const styles = StyleSheet.create({
    page: {
        backgroundColor: "#ffffff"
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
    },
    movieContainer: {
        backgroundColor: "#f6f6f5",
        padding: 20
    },
    movieDetails: {
        display: "flex",
        marginLeft: 5
    },
    Title: {
        fontSize: 15,
        marginBottom: 10
    },
    Overview: {
        fontSize: 10
    },

    image: {
        height: 200,
        width: 150
    },
});

In above Umovie.jsx if I remove <p>Hi Hello How areyou</p> this then its working fine but if I add this it is not working...

Answer 1

sorry but there's no way to render html tags. You'll need to replace your <p> with <Text>.