Question 365425 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React not importing component properly

I have this simple React code but is not importing properly, I don’t know why.

import teste from './components/teste';
import './App.css';


function App() {
  return (
    <Container>
        <teste/>
    </Container>
  );
}

const Container = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: blue;
`

export default App;

also have the teste component

import React from 'react'

export default function teste() {
  return (
    <div>teste</div>
  )
}

This is the folder structure
enter image description here
could someone help me?

Tags:

2

Answers


  1. 0

    The name of components needs to start with a capital letter, otherwise they are not considered as components by React. Try to rename your component to Test and it should work.

    Login or Signup to reply.
  2. 0

    `const Container = styled.div“ looks like styled components syntax.

    Is the styled-components package installed?

    # with npm
npm install styled-components

# with yarn
yarn add styled-components

    Try removing the styled component syntax and use plain jsx instead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search