React form mailto sends errors

Topic: React form mailto sends errors

bgining2this free asked 5 years ago

I have wrote a form component, it has mdbinput and such mdbreact tags, the form is sent with mailto, the expected behaviour is to show the form

Actual behaviour is i get the error "Invariant Violation.- Minified React error #290" and the page shows it has errors with a header informing that

You can see many examples of this forms in the forms section in mdb page, because i cannot copy and paste right now from my project.

Add comment

Jakub Chmura staff answered 5 years ago

1 0 Best answer

<p>hi <a href="/profile/?id=53985" target="_blank" rel="nofollow">@bgining2this</a>,</p>

<p>Try this code snippet. It works for me</p>

<pre class="prettyprint"><code>import React, { Component } from 'react';
import {
  MDBContainer,
  MDBRow,
  MDBCol,
  MDBBtn,
  MDBIcon,
  MDBInput
} from 'mdbreact';

class Formulario extends Component {
  render() {
    return (
      <form
        id='contact-form'
        name='contact-form'
        action='mailto:herreraestrella@hotmail.com'
        method='POST'
        encType='text/plain'
        style={{ padding: 5 }}
      >
        <MDBRow className='grey-text small'>
          <MDBInput
            label='Su Nombre'
            name='nombre'
            required={true}
            group
            type='text'
            validate
            error='wrong'
            success='right'
            icon='user'
            ref='nombre'
          />
          <MDBInput
            label='E-mail o correo aqui'
            name='email'
            required={true}
            group
            type='email'
            validate
            error='wrong'
            success='right'
            icon='envelope'
            ref='email'
          />
          <MDBInput
            label='Tema o solicitud'
            name='tema'
            required={true}
            group
            type='text'
            validate
            error='wrong'
            success='right'
            icon='tag'
            ref='tema'
          />
          <MDBInput
            type='textarea'
            name='mensaje'
            required={true}
            rows='2'
            label='Su Mensaje aqui'
            icon='pencil-alt'
            outline
            ref='mensaje'
          />
        </MDBRow>
        <MDBRow className='text-center'>
          <MDBCol col='12'>
            <MDBBtn
              outline
              color='secondary'
              className='hoverable'
              type='submit'
              name='submit'
              id='submit'
              value='submit'
            >
              Enviar !!! <MDBIcon far icon='paper-plane' className='ml-1' />
            </MDBBtn>
          </MDBCol>
        </MDBRow>
      </form>
    );
  }
}

export default Formulario;
</code></pre>

Please insert min. 20 characters.

hi @bgining2this,

Try this code snippet. It works for me

import React, { Component } from 'react';
import {
  MDBContainer,
  MDBRow,
  MDBCol,
  MDBBtn,
  MDBIcon,
  MDBInput
} from 'mdbreact';

class Formulario extends Component {
  render() {
    return (
      <form
        id='contact-form'
        name='contact-form'
        action='mailto:herreraestrella@hotmail.com'
        method='POST'
        encType='text/plain'
        style={{ padding: 5 }}
      >
        <MDBRow className='grey-text small'>
          <MDBInput
            label='Su Nombre'
            name='nombre'
            required={true}
            group
            type='text'
            validate
            error='wrong'
            success='right'
            icon='user'
            ref='nombre'
          />
          <MDBInput
            label='E-mail o correo aqui'
            name='email'
            required={true}
            group
            type='email'
            validate
            error='wrong'
            success='right'
            icon='envelope'
            ref='email'
          />
          <MDBInput
            label='Tema o solicitud'
            name='tema'
            required={true}
            group
            type='text'
            validate
            error='wrong'
            success='right'
            icon='tag'
            ref='tema'
          />
          <MDBInput
            type='textarea'
            name='mensaje'
            required={true}
            rows='2'
            label='Su Mensaje aqui'
            icon='pencil-alt'
            outline
            ref='mensaje'
          />
        </MDBRow>
        <MDBRow className='text-center'>
          <MDBCol col='12'>
            <MDBBtn
              outline
              color='secondary'
              className='hoverable'
              type='submit'
              name='submit'
              id='submit'
              value='submit'
            >
              Enviar !!! <MDBIcon far icon='paper-plane' className='ml-1' />
            </MDBBtn>
          </MDBCol>
        </MDBRow>
      </form>
    );
  }
}

export default Formulario;

Best, Kuba

bgining2this free commented 5 years ago

@Jakub Chmura Thank you for everything, that was it, i guess the form needed a class after all, thank you again !!!

Jakub Chmura staff commented 5 years ago

@bgining2this, It's no problem for me. I'm happy I could help

Best Regards,

Kuba

Add comment

bgining2this free answered 5 years ago

0 0 Best answer

<p>Shure heres the form component.-</p>

<pre class="prettyprint"><code>import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon, MDBInput } from 'mdbreact';

const Formulario = () => (
        <form id='contact-form' name='contact-form' action='mailto:herreraestrella@hotmail.com' method='POST' encType='text/plain' style={{ padding: 5 }}>

</MDBRow>
            <MDBRow className='text-center'>
              <MDBCol col='12'>
                <MDBBtn outline color='secondary' className='hoverable' type='submit' name='submit' id='submit' value='submit'>
                  Enviar !!! <MDBIcon far icon='paper-plane' className='ml-1' />
                </MDBBtn>
              </MDBCol>
            </MDBRow>
          </form>
)

export default Formulario
</code></pre>

Please insert min. 20 characters.

Shure heres the form component.-

import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon, MDBInput } from 'mdbreact';

const Formulario = () => (
        <form id='contact-form' name='contact-form' action='mailto:herreraestrella@hotmail.com' method='POST' encType='text/plain' style={{ padding: 5 }}>

            <MDBRow className='grey-text small'>
              <MDBInput
                  label='Su Nombre'
                  name='nombre'
                  required={true}
                  group
                  type='text'
                  validate
                  error='wrong'
                  success='right'
                  icon='user'
                  ref='nombre'
              />
              <MDBInput
                  label='E-mail o correo aqui'
                  name='email'
                  required={true}
                  group
                  type='email'
                  validate
                  error='wrong'
                  success='right'
                  icon='envelope'
                  ref='email'
              />
              <MDBInput
                  label='Tema o solicitud'
                  name='tema'
                  required={true}
                  group
                  type='text'
                  validate
                  error='wrong'
                  success='right'
                  icon='tag'
                  ref='tema'
              />
              <MDBInput
                  type='textarea'
                  name='mensaje'
                  required={true}
                  rows='2'
                  label='Su Mensaje aqui'
                  icon='pencil-alt'
                  outline
                  ref='mensaje'
              />

           </MDBRow>
            <MDBRow className='text-center'>
              <MDBCol col='12'>
                <MDBBtn outline color='secondary' className='hoverable' type='submit' name='submit' id='submit' value='submit'>
                  Enviar !!! <MDBIcon far icon='paper-plane' className='ml-1' />
                </MDBBtn>
              </MDBCol>
            </MDBRow>
          </form>
)

export default Formulario

Add comment

Jakub Chmura staff answered 5 years ago

0 0 Best answer

Hi @bgining2this. Thank you very much for your feedback!

I've tested this and for me works fine. We need to figure out what was happening in this case.

Could you send here a little code sample that helps us to reproduce the issue?

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards,

Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.22.1
Device: Desktop
Browser: Chromium, Opera
OS: Arch Linux
Provided sample code: No
Provided link: No

bgining2this

77Support score
11Questions 2Answers 0Snippets