React form mailto sends errors

Topic: React form mailto sends errors

bgining2this 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 premium answered 5 years ago

1 0 Best answer

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 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 premium commented 5 years ago

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

Best Regards,

Kuba

Add comment

Jakub Chmura staff premium 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

bgining2this answered 5 years ago

0 0 Best answer

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

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

User: 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 likes 0Snippets