0
242
ViewsHow to do it some items or headers should not render multiple time in react native
I have Table on right side there is columns on the top each box there is heading so . I just Want that. that heading should not repeat. on each box . it should only repeat on the top of the column.
here is code - https://snack.expo.dev/@xeteke8423/sellerformat
·
Juan Pablo Isaza
1 answers
Answer question0
You can solve that by passing the index prop to the SecondaryBox and render the heading conditionally.
Make following changes in your codebase:
App.js:
//.......
<View>
{sample.map((item) => (
<View style={{ flexDirection: 'row' }}>
{item['sellerId']?.map((buyer, index) => (
<SecondaryBox sellerId={buyer} index={index} />
))}
</View>
))}
</View>
//.......
And in your SecondaryBox.js render the heading conditionally like below:
//............
<ScrollView horizontal>
{
<View style={{ flexDirection: 'row' }}>
<View style={{ marginLeft: 10 }}>
{index === 0 ? (
<View style={{position: ""}}>
<Text>Seller Profile</Text>
<Text>View Remark</Text>
<Text>Unit/Price</Text>
</View>
) : (
<View style={{ height: 55 }}></View>
)}
//............
Here is the output:
·
Juan Pablo Isaza
Report
Answer question