CODEWITHSUNDEEP
javascriptreact-nativereact-native-ios
Oliver D
Oliver D

Reputation: 2889

could not call function when create PDF in react native?

I'm using react-native-html-to-pdf to create a pdf file it's work fine

but in my case, I have an array and I want to iterate them to append it to HTML,

so I make a function that iterates items and returns HTML tags when I log these items I can see it inside my console logs But when I open the PDF file generated I just see undefined! although it's logged well

state =  {
     toolsUsed: [
      {
        name: 'N-1',
        price: 10,
        count: 3,
        id: Math.floor(Math.random() * 150).toString(),
      },
      {
        name: 'N-2',
        price: 5,
        count: 3,
        id: Math.floor(Math.random() * 150).toString(),
      },
      {
        name: 'N-3',
        price: 10,
        count: 7,
        id: Math.floor(Math.random() * 150).toString(),
      },
    ],
}

Function

printTool = () => {
    this.state.toolsUsed.map(({name, price, count, id}) => {
      console.log('name', name); // it log successful
      console.log('price', price);// it log successful
      console.log('count', count);// it log successful
      return (
        <>
          <p key={id} style="text-align:right;padding:10px;">
            name: ${name}
          </p>
          <p key={id} style="text-align:right;padding:10px">
            count: ${count}
          </p>
          <p key={id} style="text-align:right;padding:10px">
            price: ${price}
          </p>
        </>
      );
    });
  };

create PDF File

  async createPDF() {
     let options = {
      //Content to print in PDF file
      html: `<h1 style="text-align: center;">
               Bill
             </h1>
            <div>
              ${this.printTool()} // I got undefined in PDF
            </div>`,

      fileName: `Bill${Math.floor(Math.random() * 100)}`,
      directory: 'Downloads',
    };

   let file = await RNHTMLtoPDF.convert(options);
   this.setState({filePath: file.filePath}, () => alert(this.state.filePath));
  }

Upvotes: 0

Views: 406

Answers (1)

Asha
Asha

Reputation: 760

Add return statement to printTool()

printTool = () => {
return this.state.toolsUsed.map(({name, price, count, id}) => {
  console.log('name', name); // it log successful
  console.log('price', price);// it log successful
  console.log('count', count);// it log successful
  return (
     '<p><p key={id} style="text-align:right;padding:10px;">name: '+name+'</p><p key={id} style="text-align:right;padding:10px">count: '+count+'</p><p key={id} style="text-align:right;padding:10px">price: '+price+'</p></p>'
  );
});
};

if you try to log the function console.log(JSON.stringify(this.printTool())) The JSON will look like json

Then change it according to your pdf view

Upvotes: 1

Related Questions