Property 'element' does not exist on type 'JSX.IntrinsicElements'

Question

I have this element (registroUsuario):

 const registroUsuario =  <div className="contenedor_central">
 <strong>Completá tus datos</strong>
 
 <IonItem>
   <IonLabel position="floating">Nombre</IonLabel>
   <IonInput ></IonInput>
 </IonItem>
 <IonItem>
   <IonLabel position="floating">Apellido</IonLabel>
   <IonInput ></IonInput>
 </IonItem>
 <IonItem>
   <IonLabel position="floating">E-mail</IonLabel>
   <IonInput></IonInput>
 </IonItem>
 <IonItem>
   <IonLabel position="floating">Clave</IonLabel>
   <IonInput ></IonInput>
 </IonItem>
</div>;

Then I want to use that element in this class:

class RegistroNuevaCuenta extends Component{

  state = {
    isActive:false
 }
 
 handleShow = ()=>{
  this.setState({
      isActive: true
  })
}

handleHide = () =>{
  this.setState({
      isActive: false
  })
}

 render(){
  
    if (this.state.isActive) {
      return (
        <registroUsuario></registroUsuario>
      );
    } else {
      return (
        <div>        
          <Boton name="Nueva cuenta de usuario" onClick={this.handleHide}></Boton>
          <Boton name="Nueva cuenta de servicio" onClick={this.handleShow}></Boton>
        </div>

     );
    }  
     }
};

But when I try to use registroUsuario in:

if (this.state.isActive) {
          return (
            <registroUsuario></registroUsuario>
          );

I get:

JSX.Element Property 'registroUsuario' does not exist on type 'JSX.IntrinsicElements'

What Im doing wrong? Thanks in advance.

.

Answer 1

Elements starting with lowercase letters are assumed to be standard html tags, like <div>, or <a>. For custom components, you need to use upper case.

So if registroUsario is meant to be a component, you will need to rename it to RegistroUsuario. Additionally, it's not actually a component at the moment, because it's not a function (nor a class). So change it to this:

const RegistroUsuario = () => (
  <div className="contenedor_central">
   <strong>Completá tus datos</strong>
   <IonItem>
     <IonLabel position="floating">Nombre</IonLabel>
     <IonInput ></IonInput>
   </IonItem>
   <IonItem>
     <IonLabel position="floating">Apellido</IonLabel>
     <IonInput ></IonInput>
   </IonItem>
   <IonItem>
     <IonLabel position="floating">E-mail</IonLabel>
     <IonInput></IonInput>
   </IonItem>
   <IonItem>
     <IonLabel position="floating">Clave</IonLabel>
     <IonInput ></IonInput>
   </IonItem>
  </div>
)

Alternatively, if it was intentional that you didn't make a component, then leave registroUsuario as it is, and remove the JSX angle brackets in the return statement:

if (this.state.isActive) {
  return registroUsuario;
}

For more information on component capitalization see this link