How to import a react component with arrow function to app.js-CodePudding

Hey Developers I am new to react js. I have made a react component named todos.js with arrow fuction in ./Components/todos.js

import React from 'react'

export const todos = () => {
    return (
        <div>
            todos works!!!
        </div>
    )
}

this is how my app.js look like

import './App.css';
import Header from './Components/header';
import Footer from './Components/footer';
import { Todos } from './Components/todos';
function App() { 
  return (
    <>
    <Header></Header>
    <Todos></Todos>
    <Footer></Footer>
    </>
  );
}

export default App;

import { Todos } from './Components/todos'; I am importing the todos.js file this way. But when I import that component to my app.js it throws error saying

Attempted import error: 'Todos' is not exported from './Components/todos'.

CodePudding user response：

First of all component name should be Capitalised. Second use export default const Todos

CodePudding user response：

It should be an export const Todos. The component name should be Capitalised it's a batter approach as react components.

Todos.js

import React from 'react'

export const Todos = () => {
    return (
        <div>
            Todos works!!!
        </div>
    )
}

App.js

import './App.css';
import Header from './Components/Header';
import Footer from './Components/Footer';
import { Todos } from './Components/Todos';

function App() { 
  return (
    <>
      <Header />
      <Todos />
      <Footer />
    </>
  );
}

export default App;