1. MDB Home Page
  2. Support Main Page
  3. MDB React
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.

Jakub Chmura staff answered 5 years ago

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

bgining2this free answered 5 years ago

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

Jakub Chmura staff answered 5 years ago

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

Write
Create snippet
Please insert min. 20 characters.

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
Tags
forms react error
About author
bgining2this
77Support score
11Questions 2Answers 0Snippets