react-native-print print of documents with data set in react native using html - react-native

Question

Is there any way to display my data set into the html within async printHTML() I am using react native. Hope anyone can help me, It would be gladly appreciated, I've been working on it for how many hours. Thank you!
I tried using this way but it is not working, i just diaplay {dataSet1 ? dataSet1.map((dataSet1 , index) => ({dataSet1 .name} )) : No data} as a text
async printHTML() {
await RNPrint.print({
html: '<h1>Heading 1</h1>{dataSet1 ? dataSet1.map((dataSet1 , index) => (<div>{dataSet1 .name}</div> )) : <div>No data</div>}'
})
}
this is the dataset i want to display
const dataSet1 = [
{
name: "Johson",
amount: 30000,
sex: 'M',
is_married: true
},
{
name: "Monika",
amount: 355000,
sex: 'F',
is_married: false
},
{
name: "John",
amount: 250000,
sex: 'M',
is_married: false
},
{
name: "Josef",
amount: 450500,
sex: 'M',
is_married: true
}
];
Here is my Function
async printHTML() {
await RNPrint.print({
html: `<h1>Custom converted PDF Document</h1>
<h1>Custom converted PDF Document</h1>
<h1>Custom converted PDF Document</h1>
<h1>Custom converted PDF Document</h1>
`,
})
}
Andt this is my render component
render(){
return(
<Container style={{backgroundColor: '#f4f5f9'}}>
<View>
<View style={styles.container}>
<Button onPress={this.printHTML} title="Print HTML" />
</View>
</View>
</Container>
)
}
}

Answer 1

insert my data in an state
this.state = {
loading: false,
sound: 'off',
selectedPrinter: null,
dataSet1: [
{
name: "Johson",
amount: 30000,
sex: 'M',
is_married: true
},
{
name: "Monika",
amount: 355000,
sex: 'F',
is_married: false
},
{
name: "John",
amount: 250000,
sex: 'M',
is_married: false
},
{
name: "Josef",
amount: 450500,
sex: 'M',
is_married: true
}
]
}
Get the data to be displayed in table
renderTableData(){
return this.state.dataSet1.map((dataSet1, index) => {
const { name, amount, sex } = dataSet1
return (
`<tr key=${index}>
<td>${name}</td>
<td>${amount}</td>
<td>${sex}</td>
</tr>`
)
})
}
Call the function here
async printHTML() {
let html_content =
`<h1>Hello, UppLabs!</h1>
<table>
<tbody>
${this.renderTableData()}
</tbody>
</table>`
await RNPrint.print({
html : html_content })
}
change the button on press
render(){
return(
<Container style={{backgroundColor: '#f4f5f9'}}>
<View>
<Button onPress={() => {this.printHTML()}} title="Print HTML" />
</View>
</View>
</Container>
)
}