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;
Related
signinL is declared but never used error, please help, it is an import that I have taken and used as a component still it's showing as error
import React from 'react'
import { Link } from 'react-router-dom'
import signinL from './signinL'
const Navbar = () => {
return (
<nav className="nav-wrapper grey darken-3">
<div className="container">
<Link to='/' className="brand-logo">My Peral</Link>
<signinL />
</div>
</nav>
)
}
export default Navbar
I have a Navbar React component with a Link component which needs to scroll down to Section component when clicked. I have implemented react-scroll, however, when I click on the Link component, I get target element not found in the browser console.
The Navbar component:
import React, { Component } from "react";
import { Link, animateScroll as scroll, scroller } from "react-scroll";
class Navbar extends Component {
render() {
return (
<div>
<ul>
<li>
<Link to="section1" activeClass="active" spy={true} smooth={true}>
Section 1
</Link>
</li>
</ul>
</div>
);
}
}
export default Navbar;
And the App.js file:
import React from "react";
// Styling
import "./styles/App.css";
// Components
import Navbar from "./components/Navbar";
import SectionOne from "./components/SectionOne";
function App() {
return (
<div className="App">
<div>
<Navbar />
<SectionOne id="section1"/>
</div>
</div>
);
}
export default App;
I used this repo as a reference, however, things don't work. What have I missed here?
I have implemented a div inside of the SectionOne component
<div id="section-one-wrapper">Section One content...</div>
and then specified that id in the Link component:
<Link to="section-one-wrapper" activeClass="active" spy={true} smooth={true}>
Section 1
</Link>
and it worked.
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 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;
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} />
}