1

Buenas Noches compañeros,

Quisiera utilizar el Reacstrap con TS, pero he estado viendo en todos los ejemplos que ubico que trabajan con JS, Al intentar realizar el codigo me arroja este error, Alguna ayuda por favor.

   import React from 'react';
    import {Modal,ModalHeader,ModalBody,ModalFooter,
         Button,FormGroup,Input,Label} from 'reactstrap';
    import './card.css';
    
    class Example extends React.Component {
    
        state={
            abierto: false,
        }
    
        abrirModal=()=>{
            this.setState({abierto: !this.state.abierto})
        }
        render(){
    
            const modalStyles={
                position:"absolute",
                top:"50%",
                left:"50%",
                transform: "translate(-50%, -50%)"
            }
    
           return(
            <div className="Principal">
               <div  className="Secundario">
            <button color="success" onClick={this.AbrirModal}>Moostrar Modal</button>
                </div>
            </div>
    
    
    <Modal isOpen={this.state.abierto} style={modalStyles}>
        <ModalHeader>
            Iniciar Sesion
        <ModalHeader/>
        <ModalBody>
            <FormGroup>
                
                <Label for="usuario">Usuario<Label>
                <Input type="text" id="usuario"><Input/>
    
                <Label for="password">Password<Label>
                <Input type="password" id="password"><Input/>
            <FormGroup/>
        <ModalBody/>
    
        <ModalFooter>
            <Button><Button/>
            <Button color="primary">Registrarte Sesion<Button/>
            <Button color="secondary" onClick={this.abrirModal}>Cerrar Sesion<Button/>
        <ModalFooter/>
    <Modal/>
    
            )
        }

}


export default Example;

El error que me aparece es el siguiente:

Failed to compile

./src/card.tsx SyntaxError: C:\Users\User\Desktop\Proyectos\timeless_web\timeless_web\src\card.tsx: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (32:0)

  30 |
  31 |
> 32 | <Modal isOpen={this.state.abierto} style={modalStyles}>
     | ^
  33 |     <ModalHeader>
  34 |         Iniciar Sesion
  35 |     <ModalHeader/>

Las expresiones JSX deben tener un elemento primario.ts(2657) La clase de elemento JSX no admite atributos porque no tiene una propiedad "props".ts(2607)

1 respuesta 1

1

Tal como lo indica el error, todas las expresiones JSX deben un elemento primario, o dicho de otra forma, estar encapsuladas en una sola etiqueta.

Algo bastante común es usar la etiqueta <React.Fragment/> o el shorthand </> la cual soluciona el problema, y no genera un elemento innecesario en el DOM.

En tu caso quedaría algo así:

return (
    <>
        <div className="Principal">
            ...
        <div/>
        <Modal isOpen={this.state.abierto} style={modalStyles}>
            ...
        <Modal/>
    </>
)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.