He declarado 2 componentes constantes en mi componente funcional React. Estoy tratando de representarlos en función de una condición,
<Flex.Box w="90px" ml={1}> { mycondition ? ({ staticButton }) : (( { staticButton })({ conditionalButton }))} </Flex.Box>Estoy tratando de representar en función de si mi condición es verdadera o falsa. Pero recibo el siguiente error en la consola.
TypeError: {(intermediate value)} is not a function¿Estoy haciendo algo mal?
Realmente no puedes hacer lo que estás pidiendo aquí.
Si está creando componentes dentro de otro componente, aún debe usar Pascal Case.
Todavía necesita envolver el nombre del componente en < /> . No puedes simplemente devolver una función.
Los componentes adyacentes deben estar en un contenedor.
function Example() { const condition = false; const StaticButton = () => <div>Static</div>; const ConditionalButton = () => <div>Conditional</div>; return ( <div> {condition ? <StaticButton /> : (<div> <StaticButton /> <ConditionalButton /> </div>) } </div> ); }; ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>Cuando desee representar 2 componentes al mismo tiempo en un ternario, debe envolverlos dentro de un fragmento (<>{staticButton} {conditionalButton}<>). ¿Supongo que tus 2 const son componentes que pasan por accesorios?
Parece que puedes mover el staticButton fuera de condición:
<Flex.Box w="90px" ml={1}> {staticButton} {mycondition ? conditionalButton : null} </Flex.Box>