I am trying to import a function from another file in react, but it says that my function is not defined
in Todolist.js:
import React from 'react';
export default function TodoList() {
return (
<div>
<h1>Todo List</h1>
</div>
)
}
In App.js:
//import react from 'react';
import React from 'react';
import {Todolist} from "./TodoList";
function App() {
return (
<TodoList />
)
}
export default App;
the result:
WARNING in src\App.js
Line 3:9: 'Todolist' is defined but never used no-unused-vars
ERROR in src\App.js
Line 8:6: 'TodoList' is not defined react/jsx-no-undef
change to default import
import Todolist from "./TodoList";
because you use export default ....
the import should be like this.
import Todolist from "./TodoList";
There are two ways to do import/export in es6:
Default Export (Can have only one default export)
Named Export (Can have zero or more named exports)
If a component/module is a default export then it is required to import it without brackets.
// Default Export.
export default App;
// Import above default export without curly braces.
import App from './path/to/your/App';
If a component/module is a named export then it is required to import it with curly braces.
// Named Export.
export A = 'Test String';
export {YourComponent};
// Import above named export with curly braces.
import {A} from './path/to/A';
import {YourComponent} from './path/to/YourComponent';
as mentioned you need to look at the named/ default export choice. Also, there is a typo in the import of TodoList - the 'l' should be capitalised.
Related
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
function App() {
return (
<div className="App">
<Greet />
</div>
);
}
export default App;
This is the code in App.js. I have made an other file of greet to run it and display the name.
This is the Greet.js code
import React from 'react'
function Greet(){
return <h1> Hello Nabeel </h1>
}
export default App;
There are 1 warring and 2 errors.
-src\App.js
Line 3:8: 'Greet' is defined but never used no-unused-vars
-src\components\Greet.js
Line 2:10: 'Greet' is defined but never used no-unused-vars
ERROR in ./src/index.js 12:33-36
export 'default' (imported as 'App') was not found in './App' (module has no exports)
ERROR in [eslint]
src\components\Greet.js
Line 6:16: 'App' is not defined no-undef
What i should i do?
The Error message is already obvious, please remember to define your function.
Greet.js:
import React from 'react';
function Greet(){
return <h1> Hello Nabeel </h1>
}
export default Greet;
In my components/ folder I have created two components:
using function-based components:
import React from 'react';
const greet = () => <div className="App"><h3>Hello Sukarna Jana</h3></div>;
export default greet;
using class-based-components:
import React,{Component} from 'react';
class welcome extends Component{
render(){
return <div className="App"><h3>Hi, its Class Components</h3></div>;
}
}
export default welcome;
but when I am trying to import that in App.js it's not running:
import './App.css';
import React from 'react';
import greet from './components/greet';
import welcome from './components/welcome';
/*
* dont know why greet and welcome tags are not working
*/
function App() {
return (
<div className="App">
<greet/>
<welcome/>
<h1>Hello Sukarna Jana</h1><hr/>
</div>
);
}
export default App;
I just reviewed the code and could find the issues easily,
You didn't keep the naming rules in your code.
<greet/> replace to <Greet/>
<welcome/> replace to <Welcome>
Also, you should change the name of the component.
welcome.js
import React, { Component } from 'react'
class welcome extends Component
{
render()
{
return <h1>Class Component</h1>
}
}
export default welcome
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import welcome from './components/welcome'
function App() {
return (
<div className="App">
<Greet />
<welcome />
</div>
);
}
export default App;
So basically in welcome.js i have a code for rendering hello rahul and i have exported that and i have imported that in App.js but it showing welcome is declared but never used please help
You have a problem with naming. React assumes every tag beginning with a small letter is native (f ex a <div> or <table>). You have to name your own components with capital letters.
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import Welcome from './components/Welcome'
function App() {
return (
<div className="App">
<Greet />
<Welcome />
</div>
);
}
export default App;
It's also a good idea to name your files with components with capital letters, to make them easy to identify.
You are importing a component in lower case letters. React doesn't recognize that as a component. So just restructure it as :
import Welcome from './components/Welcome'
then do
<Welcome/>
I'm new to React and facing issues when I want to output "my hello welcome to react". I have gone through documents and youtube videos still can't identify fault.Here is the code:
import React, { Component } from 'react';
import logo, { ReactComponent } from './logo.svg';
import './App.css';
import ReactDom from "react-dom";
class Layout extends React.component {
render(){
return(
<h1>hello welcome to reactjs</h1>
);
}
}
let app = document.getElementById("root")
ReactDom.render(<Layout/>, app)
export default App;
Here is the compile error from the compiler
Failed to compile
./src/App.js
Line 20:16: 'App' is not defined no-undef
Your code won't compile properly since App is not defined.
export default App;
You probably wanted to export Layout.
export default Layout;
Either remove this line
export default App;
or
change the line to this
export default Layout;
Basically, you are getting this error because you're trying to export App component and in the current file there isn't any component exist named App
Your code won't compile properly since App is not defined.
export default App;
You probably wanted to export Layout.
export default Layout;
You don't need to export anything. You're rendering the Layout component in the DOM directly.
Please delete this line and try.
export default App;
Change Your class component name to
export default Layout;
it will work
I'm trying to create a React App.. largely my attempts so far are based on the default application from create-react-app. Here's my App.js:
import React from 'react';
import './App.css';
import './Components/MyComponent';
function App() {
return (
<div className="App">
<MyComponent/>
</div>
);
}
export default App;
MyComponent is defined here:
import React from 'react';
import img from './Assets/img.png';
import imgComponent from './MyImage';
class MyComponent extends React.Component {
render() {
return
<div>
<imgComponent imageProp={img} />
</div>
}
}
export default MyComponent;
When I run this, I get the error:
./src/App.js
Line 8: 'MyComponent' is not defined react/jsx-no-undef
Please could someone tell me why I'm getting this error? I was under the impression that a combination of the import in App.js and the export default in MyComponent was all that was needed to use the component.
In the App.js you added MyComponent to the render method, but MyComponent is not defined in your code (as the error message says).
Just change your third import:
import './Components/MyComponent';
To:
import MyComponent from './Components/MyComponent';
So you got the component you are using in your render function.
I hope it helps!
When we are doing export default Mycomponent, we are exposing the Mycomponent module to other modules. But we require a local name to access the contents. For a default export, it doesn't have to be the same as export. A simple import statement should look like import name from 'module'.
In your case, it will be
import MyComponent from './Components/MyComponent'.