CODEWITHSUNDEEP
javascriptreactjs
Freelancer Help
Freelancer Help

Reputation: 181

How can I fix attempted import error in my React App?

I'm recieving this error when I try to import component into my React JS File:

./src/containers/ContactPage/ContactPage.js
Attempted import error: 'ContactForm' is not exported from '../../containers'.

This is how I'm importing the ContactForm:

import React from 'react';
import config from '../../config';
import { twitterPageURL } from '../../util/urlHelpers';
import { StaticPage, TopbarContainer, ContactForm } from '../../containers';
import {
  LayoutSingleColumn,
  LayoutWrapperTopbar,
  LayoutWrapperMain,
  LayoutWrapperFooter,
  Footer,
  ExternalLink,
} from '../../components';

And this is my ContactForm file:

import React from "react";
import axios from "axios"; // For making client request.

class ContactForm extends React.Component {
  constructor(props){
    super(props);
    this.state = {name: "", surname: "", email: "", message: ""};
  }

  handleForm = e => {
    axios.post(
      "https://formcarry.com/s/Ek8wZYC7v0H", 
      this.state, 
      {headers: {"Accept": "application/json"}}
      )

      .then(function (response) {
        let successMessage = document.querySelector('.success-message');
        successMessage.innerHTML = JSON.stringify(response.data.title);
      })
      .catch(function (error) {
        let successMessage = document.querySelector('.success-message');
        successMessage.innerHTML = JSON.stringify(error);
      });

    e.preventDefault();
    this.setState({fullName: '', email: '', message: ''}) // <= here
  }
    handleFields = e => this.setState({ [e.target.name]: e.target.value });  

  render() {
    return (

      <form onSubmit={this.handleForm}>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" onChange={this.handleFields} value={this.state.fullName} />

        <label htmlFor="surname">Surname</label>
        <input type="text" id="surname" name="surname" onChange={this.handleFields} value={this.state.fullName} />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" onChange={this.handleFields} value={this.state.fullName} />

        <label htmlFor="message">Your Message</label>
        <textarea name="message" id="message" onChange={this.handleFields} value={this.state.fullName}></textarea>

        <button type="submit">Send</button>

 <div className="success-message">
                <label></label>
              </div>

      </form>
    );
  }
}

export default ContactForm;

So my ContactForm file is in containers/ContactForm/ContactForm.js and its basically a contact form which I want to import to my Contact Page. I tried following the answers here to fix this but couldn't manage it.

I tried importing it as (didn't worked):

import ContactForm from '../../containers';

Upvotes: 1

Views: 11238

Answers (1)

colinux
colinux

Reputation: 4579

I think your ./src/containers/index.js file doesn't export the ContactForm module. This file should contain the line (like for StaticPage, TopbarContainer...)

export ContactForm from './ContactForm'

Upvotes: 1

Related Questions