I am just starting a new React project but I am having trouble importing a particular file, which is located in a seperate folder named 'Components', into my app.js file.
Please have a look below at the code I am using to import.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import Category from './Components/Category.js';
import './App.css';
And here is the barely developed Category component, if its of any use in providing a sulution?
const Category=()=>{
return (
<div>
<div class="categories">
<div class="category-choice">
<h1>CAREER</h1>
</div>
<div class="category-choice">
<h1>FINANCE</h1>
</div>
</div>
</div>
)
}
export default Category;
And here is the error message react is providing me with
you need to import React everywhere where you are using JSX. it is important because all JSX elements get transpiled to React.createElement. so React must always be in scope.
import React from 'react' // add this line
const Category=()=>{
return (
<div>
<div class="categories">
<div class="category-choice">
<h1>CAREER</h1>
</div>
<div class="category-choice">
<h1>FINANCE</h1>
</div>
</div>
</div>
)
}
export default Category;
Related
I am just started working with react js for couple of days it throws error like
src\App.js
Line 2:8: 'navbar' is defined but never used no-unused-vars.this error occurs while i am importing the navbar component into my app.js, i did install eslint package and update my npm version also,i really dontknow what to do .i would really appreciate if u guys provide solution
Below code is my app.js:
import React from 'react';
import navbar from"./components/navbar";
import './App.css';
function App() {
return (
<div className="App">
<navbar />
</div>
);
}
export default App;
below is my navbar.js code which i am trying to import in the app.js
import React, { Component } from 'react';
import{MenuItems} from "./MenuItems";
import "./navbar.css";
class navbar extends Component{
render(){
return(
<nav className="navbarItems">
<h1 className="navbar-logo">React<i className="fab fa-react"></i>
</h1>
<div className="menu-icon"></div>
<ul>
{MenuItems.map((items,index)=>{
return(
<li key={index}>
<a className={MenuItems.cname}href={items.url}>
{items.title}
</a></li>
)
})}
</ul>
</nav>
)
}
}
export default navbar;
I'm starting a small react project (beginner) and when I cut my 'App' component into many small components, such as 'header', it doesn't work. The error started to happen as soon as I cut my header. And to say that the header css doesn't load either. You can see in the element inspector that the React component is present, but it doesn't want to load the css associated with it.
// In App.js
import React from 'react';
import header_type from './header';
class App extends React.Component {
render() {
return (
<div className="window">
<div className="window-body">
<header_type/>
<div className='window_inner'>
<div className="column_left">
</div>
<div className="column_right">
</div>
</div>
</div>
</div>
)
}
}
export default App;
// In header.js
class header_type extends React.Component {
render() {
return (
<div className="window-header" >
</div>
)
}
}
export default header_type;
// In index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../src/components/App';
import '../src/style/window.css';
ReactDOM.render(
<App />, document.getElementById('root')
);
// error :
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
WARNING in src\components\App.js
Line 2:10: 'header_type' is defined but never used no-unused-vars
webpack compiled with 1 warning
Thank you in advance for the answers. Have a nice day.
one issue that is present in the above is code is you are exporting a default component from header.js, and importing it as named export in App.js.
In your App.js while importing header component import it as
import header_type from './header';
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
I'm a newbie here so apologies for what might be a very elemental question.
I am trying to fiddle with different ways to import components in React by following a tutorial but I can't seem to make it work. There must be a simple tweak that I am sorely missing.
I am trying to create export a component (Person2) to another JS (App)
Person2.js
import React from 'react'
import ReactDOM from 'react-dom'
function Person2(){
return (
<div>
<h1>Millie</h1>
<p>PERSON 2</p>
</div>
);
}
/*
ReactDOM.render(
<div>
<h1>Hello World!</h1>
</div>,
document.getElementById('#p2')
);
*/
//ReactDOM.render(<Person2 />, document.getElementById('App'));
ReactDOM.render(<Person2 />, document.querySelector('#p2'));
App.js
import React from 'react';
import './css/App.css';
import './css/w3.css'
import Person from './Person'; // Import a component from another file using class with default export
import './Person2'; // Import a a component from another file using ReactDom.render
function App() {
return (
<div className="App">
<header className="App-header">
<p>this is the header</p>
</header>
<body>
<div class="w3-row">
<Person name="Max" age="28"/>
<Person name="Ann" age="18"/>
<div id = "p2"></div>
</div>
</body>
</div>
);
}
export default App;
Any idea where I went wrong?
I'm getting an error "Error: Target container is not a DOM element."
ReactDOM.render is usually used only for rendering your root component, I don't think you should use it in that case. With that said, the problem is the order the code is executed. You try to render your Person2 component in a node that hasn't been yet rendered, thus you get that error
Unless you have a very strange use case, you should be using export not ReactDOM.render for this example.
In Person2, change to this:
//ReactDOM.render(<Person2 />, document.querySelector('#p2'));
export default Person2;
Then to use it, in App change to this:
import Person2 from './Person2'; // for default export
...
<Person name="Ann" age="18"/>
//<div id = "p2"></div> *** remove this ***
<Person2 /> // Use like this
If for whatever reason your app requires the use of ReactDOM.render here, I'd add a check for safety to make sure the element exists first.
if (!!document.getElementById('p2')) {
ReactDOM.render(<Person2/>, document.getElementById('p2'));
}
In reactjs, I have already created one component and added it to my Main.js file but now, I need to add one more component to it and due to JSX restriction of having only one root element per JSX, I cannot add one more component to it. I don't know where I'm going wrong in this.
`~~~~index.js file`
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
ReactDOM.render(
<Main/>,
document.getElementById("root")
);
-------------------------------------------------------
Main.js file
import React, { Component } from "react";
import Header from './Header';
// import Body from './Body';
import './index.css';
class Main extends Component {
render() {
return (
<div className="Main">
<Header image={require('./demo.jpg')}/>
{/* <Body/> */}
</div>
);
}
}
export default Main;
-------------------------------------------------------
Header.js file
import React from 'react'
import './Header.css';
// import Body from './Body';
export default (props) => {
const style= {
backgroundImage : "url(" + props.image + ")"
}
return (
<div className="body" style={style}>
<button className="btn" > Drawer </button>
<h1 className="heading1"> Questions </h1>
<button className="heading2"> Eye Button </button>
<h2 className="heading3"> Hi.. Sandeep Gautam </h2>
<h3 className="heading4"> Mind answering a few questions </h3>
</div>
)
}`
I have setup a basic react app using create-react-app and created my first component. However, the project is not able to build or render due to this error in browser window:
CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8
Here's my index.js file code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and the App.js where I have imported the new component:
import React, {Component} from 'react';
import './App.css';
import CountDown from '../countdown/Countdown';
class App extends Component {
render() {
return(
<div className="App">
Hello React
<CountDown/>
</div>
);
}
}
export default App;
Finally, my Countdown component code:
import React from 'react';
const CountDown = (props) => {
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
};
export default CountDown;
Do I need to also import my new component here? How do I solve this issue. Thanks.
Your Countdown component doesn't return anything, you can replace the {} with () in order to have it return.
import React from 'react';
const CountDown = (props) => (
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
);
export default CountDown;
That should do it.
CountDown component doesn't return the JSX. You can add an explicit return statement for returning the JSX.
Had the same problem with this:
function Input(props) {
return
<input type={props.type} placeholder={props.placeholder} />
}
Instead it had to be:
function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
}