i have code like below
const mode = isActiveMode;
{!isActiveMode && runId && !isEmpty(items) && (
<>
<Flex>
//more jsx similar
<Icon onClick={() =>
setItemState((previous: any) => ({
...previous,
items: undefined,
}))
}
/>
<TabPanel>
<Table />
</TabPanel>
</>
)}
{isActiveMode && runId && !isEmpty(items) && isTableOpen && (
<>
<Flex>
//more jsx similar
<Icon onClick={() =>
setItemState((previous: any) => ({
...previous,
items: undefined,
}))
}
/>
<TabPanel>
{selections.length === 1 ? (
<Table/> ): ( <div>hello</div>)
}
</TabPanel>
</>
)}
i have two renderings based on different conditions. the code inside is almost same in both cases. how can i reuse the code in this case. could someone please help me with this.
How can i rewrite above code into one with conditions using reusable code. thanks.
From what I can see your jsx is pretty similar how about that one condition which was different you put it in ternary operator because table was rendering
const mode = isActiveMode;
{!isActiveMode && runId && !isEmpty(items) && (
<>
<Flex>
//more jsx similar
<Icon onClick={() =>
setItemState((previous: any) => ({
...previous,
items: undefined,
}))
}
/>
<TabPanel>
{isTableOpen===false || selections.length === 1 ? (
<Table/> ): ( <div>hello</div>)
}
</TabPanel>
</>
)}
Tell me if this isn't what you were looking for I'll try something different then