Quiero iniciar múltiples componentes cuando una variable es verdadera y estoy usando de la siguiente manera:
return ( <div className="report"> {conditionalVariable && <ComponentA/> && <ComponentB/> } </div> )Sin embargo, cuando la variable es verdadera, solo el componente A se levanta pero no el componente B. ¿Qué hay de malo en esto?
Me sorprende que obtengas algún resultado. Esos componentes condicionales una vez que haya resuelto la lógica, deben tener un padre, ya sea con un fragmento, un div o algo así.
Habrías visto algo similar a este error:
SyntaxError: script de Babel en línea: los elementos JSX adyacentes deben estar envueltos en una etiqueta adjunta
const { Fragment, useState } = React; function Example() { const [ conditional, setConditional ] = useState(false); function handleClick() { setConditional(!conditional); } return ( <div> {conditional && ( <Fragment> <Test text="Bob" /> <Test text="Sue" /> </Fragment> )} <button onClick={handleClick}> Click me </button> </div> ); } function Test({ text }) { return <p>{text}</p>; } 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>Tus llaves están colocadas de forma bastante extraña. Pruébalo así:
return ( <div className="report"> {conditionalVariable && <> <ComponentA /> <ComponentB /> </> } </div> ) Esta solución utiliza la sintaxis abreviada de React.Fragment para agrupar los dos componentes que desea mostrar en la misma condición.