Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

96
Vistas
ReactJS - Element type is invalid

I keep getting this weird error in my React that says

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ContactTemplate`.

I tried to remove each of the import to see where the error is, but nothing works.

My ContactTemplate.jsx:

import React from 'react';
import { Container } from '~/components/interface/Container';
import PreviewBar from '~/components/PreviewBar';
import HeroFull from '~/components/HeroFull/HeroFull';
import { Wrapper, Columns, Paragraph, BigText } from './ContactTemplate.styles';
import { Link } from '~/components/interface/Link';

const ContactTemplate = ({ preview }) => {
  const data = [
    {
      name: 'Name 1',
      job: 'Bestuursrechts',
      phone: '+31 (0) 612345678',
      email: 'Email',
      link: 'https://www.linkedin.com',
    },
    {
      name: 'Name 2',
      job: 'Intellectuele eigendom en contractenrecht',
      phone: '+31 (0) 612345678',
      email: 'email',
      link: 'https://www.linkedin.com',
    },
  ];

  return (
    <>
      <Wrapper>
        {preview && <PreviewBar />}
        <HeroFull
          title="Contact"
          intro="We offer ...."
        />
      </Wrapper>
      <Container>
        <Columns>
          {data.map(item => (
            <div>
              <BigText>{item.name}</BigText>
              <Paragraph>{item.job}</Paragraph>
              <Paragraph>{item.phone}</Paragraph>
              <Paragraph>{item.email}</Paragraph>
              <Link>{item.link}</Link>
            </div>
          ))}
        </Columns>
      </Container>
    </>
  );
};

export default ContactTemplate;

Could someone help me out with this please? If there are more files needed I'll add them on request.

7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Most likely you're trying to import { ContactTemplate } from "./ContactTemplate", but you're using export default. At this point you should import ContactTemplate from "./ContactTemplate"

Can you confirm if this is the case? Can you show the component, where you import and trying to use ContactTemplate?

7 months ago · Juan Pablo Isaza Denunciar

0

I solved it myself. The first problem was that my Docker was stuck so I had to restart it. After I restarted it I tried to remove each import individually to see where the problem was and it was the { Link } that needed to be just Link. Thanks everyone else for helping!

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.