tengo un código como el siguiente
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> </> )}Tengo dos representaciones basadas en diferentes condiciones. el código interior es casi el mismo en ambos casos. ¿Cómo puedo reutilizar el código en este caso? Podría alguien ayudarme con esto, por favor.
¿Cómo puedo reescribir el código anterior en uno con condiciones usando código reutilizable? Gracias.
Por lo que puedo ver, su jsx es bastante similar, ¿qué tal esa condición que era diferente, la puso en el operador ternario porque la tabla se estaba representando?
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> </> )}Dime si esto no es lo que estabas buscando intentaré algo diferente entonces