I am trying to make a react website and it randomly stopped loading on my browser. The console displays a long list of errors. Most of these are: "tabTarget is null" and "Unchecked lastError value: Error: Unexpected error occured".
I can't seem to find similar problems. Below is my code for App.js, Footer.js, and Index.js.
App.js
import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
//import NavbarBrand from 'react-bootstrap/NavbarBrand';
import './App.css';
import Footer from './components/Footer';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: 'My name',
headerLInks: [
{title: 'Home', path: '/'},
{title: 'About', path: '/about'},
{title: 'Contact', path: '/contact'},
],
home: {
title: 'Be Relentless',
subTitle: 'Projects that make a difference',
text: 'Checkout my projects below'
},
about: {
title: 'About me'
},
contact: {
title: 'Let\'s talk'
}
}
}
render() {
return (
<Router>
<Container className='p-0' fluid={true}>
<Navbar className='border-bottom' bg="transparent" expand="lg">
<Navbar.Brand>My Name</Navbar.Brand>
<Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
<Navbar.Collapse id="navbar-toggle">
<Nav className="ml-auto">
<Link className="nav-link" to="/">Home</Link>
<Link className="nav-link" to="/about">About</Link>
<Link className="nav-link" to="/contact">Contact</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Footer />
</Container>
</Router>
)
}
}
export default App;
Footer.js
import React from 'react';
import Container from 'react-bootstrap/esm/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function Footer() {
return (
<Footer className="mt-5">
<Container fluid={true}>
<Row classNam="border-top justify-content-between p-3">
<Col className="p-0" md={3} sm={12}>
My name
</Col>
</Row>
</Container>
</Footer>
)
}
export default Footer;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
You are calling the Footer function within itself which causes the loop. Change the Footer function to the following:
function Footer() {
return (
<Container fluid={true}>
<Row classNam="border-top justify-content-between p-3">
<Col className="p-0" md={3} sm={12}>
My name
</Col>
</Row>
</Container>
)
}
Just change your footer to html or another tag for example:
import React from 'react';
import Container from 'react-bootstrap/esm/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function Footer() {
return (
<footer className="mt-5">
<Container fluid={true}>
<Row classNam="border-top justify-content-between p-3">
<Col className="p-0" md={3} sm={12}>
My name
</Col>
</Row>
</Container>
</footer>
)
}
Related
I am trying to link a section ID using NavLink of react-router-dom but the link is requested to the server but does not link the specific id.
I want to link section Id with Navlink so that I can easily call the Id by clicking on the Navlink.
*Navbar.js*
import React from "react";
import "./Navbar.css";
import { NavLink } from "react-router-dom";
const Navbar = () => {
return (
<>
<nav>
<div className='container spaceB flex'>
<div className='leftSide'>
<NavLink className='navLink' to={"/"}>
<h1 className='logoH'>{"<Rajib/>"}</h1>
</NavLink>
</div>
<div className='rightSide'>
<ul className='flex'>
<NavLink className='navLink' to='/#intro'>
<li>About</li>
</NavLink>
<NavLink className='navLink' to='/#skills'>
<li>Skills</li>
</NavLink>
<NavLink to='/#works' className='navLink'>
<li>Works</li>
</NavLink>
</ul>
<NavLink className='navLink' to='/#contact'>
<button className='btn'>Contact</button>
</NavLink>
</div>
</div>
</nav>
</>
);
};
export default Navbar;
*App.js*
import "./App.css";
import Intro from "./components/common/Intro";
import Navbar from "./components/common/Navbar";
import Services from "./components/common/Skills";
import Works from "./components/common/Works";
import Contact from "./components/common/Contact";
function App() {
return (
<>
<header>
<Navbar />
</header>
<main>
<Intro />
<Services />
<Works />
<Contact />
</main>
</>
);
}
export default App;
*index.js*
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<Routes>
<Route path='/' exact element={<App />} />
</Routes>
</BrowserRouter>
);
Please suggest the best solution so that i can link the section by calling it's Id in NavLink when clicking the specific navmenu.
I have been trying to dynamic display data depending on the ID from the app.js. I'm sending the ID correctly but the other page ins't receiving the ID
import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import Top from './top.js';
import Bottom from './bottom';
import Right from './right';
import Left from './left';
import Center from './center';
import About from './about';
import Help from './help';
import * as bs from 'react-bootstrap';
import { BrowserRouter as Router , Route, Switch} from "react-router-dom";
function App(props) {
return (
<Router>
<Container fluid className="p-0 min-vh-100 d-flex flex-column">
<Row fluid className = "flex-grow-0 flex-shrink-0 shadow-sm" >
<bs.Col className = "px-3 py-2">
<Top/>
</bs.Col>
</Row>
<Row noGutters className = "flex-grow-1">
<Col md="2" className ="px-3 py-4 shadow" style ={{backgroundColor: "#99CCCC"}}>
<Left/>
</Col>
<Col md="8">
<Switch>
<Route path ="/">
<Center />
</Route>
<Route path = "/product-detail/:{props.product.id}" >
<ProductsDetail/>
</Route>
</Switch>
</Col>
<Col md = "2" className = "px-3 py-4 shadow" style ={{backgroundColor: "#343a40"}}>
<Right/>
</Col>
</Row>
<Row fluid>
<Col className = "d-flex justify-content-center px-3 py-2" style ={{backgroundColor: "#28a745"}}><Bottom/></Col>
</Row>
</Container>
</Router>
)
}
export default App;
It sends the ID but now on the other page doesn't display the data that I want to use
import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import * as bs from 'react-bootstrap';
import { useParams} from "react-router";
function ProductsDetail(props) {
let {id}= useParams()
return (
<div>
<p>
Description: {id}
</p>
</div>
)
}
export default ProductsDetail;
I have been trying using useParams() but I don't correctly understand how am I suppose to grab the ID and display the information. Also, I have been using props to send the ID.
you are not passing the id to the component, you don't need to have from useParams if you pass it directly like this
App:
import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import Top from './top.js';
import Bottom from './bottom';
import Right from './right';
import Left from './left';
import Center from './center';
import About from './about';
import Help from './help';
import * as bs from 'react-bootstrap';
import { BrowserRouter as Router , Route, Switch} from "react-router-dom";
function App(props) {
return (
<Router>
<Container fluid className="p-0 min-vh-100 d-flex flex-column">
<Row fluid className = "flex-grow-0 flex-shrink-0 shadow-sm" >
<bs.Col className = "px-3 py-2">
<Top/>
</bs.Col>
</Row>
<Row noGutters className = "flex-grow-1">
<Col md="2" className ="px-3 py-4 shadow" style ={{backgroundColor: "#99CCCC"}}>
<Left/>
</Col>
<Col md="8">
<Switch>
<Route path = {"/product-detail/${props.product.id}"} >
<Center />
</Route>
<Route path = "/product-detail/:{props.product.id}" >
<ProductsDetail id={props.product.id}/>
</Route>
</Switch>
</Col>
<Col md = "2" className = "px-3 py-4 shadow" style ={{backgroundColor: "#343a40"}}>
<Right/>
</Col>
</Row>
<Row fluid>
<Col className = "d-flex justify-content-center px-3 py-2" style ={{backgroundColor: "#28a745"}}><Bottom/></Col>
</Row>
</Container>
</Router>
)
}
export default App;
ProductsDetail:
import React from 'react';
import {Container, Row, Col } from 'react-bootstrap'
import './App.css';
import * as bs from 'react-bootstrap';
import { useParams} from "react-router";
function ProductsDetail(props) {
let {id}= useParams()
return (
<div>
<p>
Description: {props.id}
</p>
</div>
)
}
export default ProductsDetail;
I'm learning reactjs and I'm trying to appear a search bar in Home section and to disappear it in the Shop section (or other sections).
To better understand, I leave you a reference image: The final result must be like this
This is the code of my component:
import React, {Component} from 'react';
import {Nav, Button, Navbar, Form, FormControl} from 'react-bootstrap';
import {NavLink} from 'react-router-dom';
import {AuthButton} from '../App';
import logo from '../img/logo.png'
class Header extends Component{
render(){
return(
<>
<Navbar>
<div>
<img src={logo} className='main-logo'/>
</div>
<Form className='form'>
<Button className='btn-search'/>
<FormControl type="text" placeholder="Search..." className='barra'/>
</Form>
<Nav className="ml-auto">
<NavLink className= 'nav-link' to='/'>Home</NavLink>
<hr className='hr-header'/>
<Nav.Link className= 'nav-link'>About</Nav.Link>
<hr className='hr-header'/>
<NavLink className= 'nav-link' to='/Shop'>Shop</NavLink>
<hr className='hr-header'/>
<Nav.Link className= 'nav-link'>Help</Nav.Link>
</Nav>
<NavLink to='/Shopping'>
<Button className='btn-cart' variant="secondary">
Your Cart
</Button>
</NavLink>
<AuthButton/>
</Navbar>
</>
)
}
}
export default Header;
And this is how I've imported my component into the Router
import React from 'react';
import './styles/App.css';
import Shop from './container/shop';
import Shopping from './container/shopping';
import Shipping from './container/shipping';
import Payment from './container/payment';
import home from './container/home';
import Product from './container/Product';
import iPhone from './container/iPhone';
import iPad from './container/iPad';
import SignInForm from './components/SignInForm';
import {BrowserRouter as Router, Route, withRouter, Redirect, Switch} from 'react-router-dom';
import {Button, ButtonToolbar, OverlayTrigger, Popover} from 'react-bootstrap';
function App(){
return (
<Router>
<Route>
<Switch>
<Route exact path='/' component={home}/>
<Route path='/Shop' component={Shop}/>
<Route path='/Product' component={Product}/>
<Route path='/iPhone' component={iPhone}/>
<Route path='/iPad' component={iPad}/>
<PrivateRoute path='/Shopping' component={Shopping}/>
<Route path='/Shipping' component={Shipping}/>
<Route path='/Payment' component={Payment}/>
<Route path='/SignInForm' component={SignInForm}/>
<Route path='*' component={() => <div
style = {{
textAlign: 'center',
paddingTop: 250,
fontSize: 30
}}>
<strong>404 NOT FOUND</strong>
</div>}/>
</Switch>
</Route>
</Router>
);
}
export default App;
I've also other files .js for the continers of my sections
Thank you all!
If you create separate components for Nav and Search, life becomes much easier. Place your Search component inside your Nav component, then render Search only at certain addresses (i.e. anything other than /Shop).
import React from "react";
import { withRouter } from "react-router-dom";
import Nav from "/.Nav";
function SearchComponent() {
return <div>My search bar</div>;
}
function MyComponent(props) {
const path = props.location.pathname;
return (
<div>
<Nav>{path !== "/Shop" && <SearchComponent />}</Nav>
</div>
);
}
export default withRouter(MyComponent);
This technique exposes location through withRouter to get the current path (/pageName). Then, it uses conditional rendering to hide the Search if the location is "/Shop."
I am Learning the routing system in React . I checked everything in my code and it seems to be correct but I don't know why it does not work.
Versions:
"react-router-dom": "4.2.2",
"react": "^16.8.4",
index.js
We go to the App.js from index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap-social/bootstrap-social.css';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
App.js
We implement BrowserRouter in App.js
import React, { Component } from 'react';
import { BrowserRouter} from 'react-router-dom';
import Main from './components/MainComponent';
import './App.css';
import { DISHES } from './shared/dishes';
class App extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
return (
<BrowserRouter>
<div className="App">
<Main />
</div>
</BrowserRouter>
);
}
}
export default App;
MainComponent.js
We define Routes in MainComponent.js
import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import { DISHES } from '../shared/dishes';
class Main extends Component {
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render() {
const HomePage = () => {
return(
<Home />
);
}
return (
<div>
<Header />
<Switch>
<Route path='/home' component={HomePage} />
<Route exact path='/menu' component={() => <Menu dishes={this.state.dishes} />} />
<Redirect to="/home" />
</Switch>
<Footer />
</div>
);
}
}
export default Main;
HeaderComponent.js
NavBar, Nav in HeaderComponent.js
import React, { Component } from 'react';
import { Nav, Navbar, NavbarBrand, NavbarToggler, Collapse, NavItem, Jumbotron } from 'reactstrap';
import { NavLink } from 'react-router-dom';
class Header extends Component {
constructor(props) {
super(props);
this.toggleNav = this.toggleNav.bind(this);
this.state = {
isNavOpen: false
};
}
toggleNav() {
this.setState({
isNavOpen: !this.state.isNavOpen
});
}
render() {
return(
<div>
<Navbar dark expand="md">
<div className="container">
<NavbarToggler onClick={this.toggleNav} />
<NavbarBrand className="mr-auto" href="/"><img src='assets/images/logo.png' height="30" width="41" alt='Ristorante Con Fusion' /></NavbarBrand>
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<NavLink className="nav-link" to='/home'><span className="fa fa-home fa-lg"></span> Home</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/aboutus'><span className="fa fa-info fa-lg"></span> About Us</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/menu'><span className="fa fa-list fa-lg"></span> Menu</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to='/contactus'><span className="fa fa-address-card fa-lg"></span> Contact Us</NavLink>
</NavItem>
</Nav>
</Collapse>
</div>
</Navbar>
<Jumbotron>
<div className="container">
<div className="row row-header">
<div className="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
</div>
</div>
</Jumbotron>
</div>
);
}
}
export default Header;
I created a grid inside of a react-bootstrap Jumbotron, but when I export it to my app.jsx none of the grid contents are displayed (but the Jumbotron and my custom styles are)
All of my other components are working fine, so I'm not sure why this isn't.
App.js:
import React, { Component } from 'react';
import {Grid} from 'react-bootstrap';
import {Row} from 'react-bootstrap';
import {Col} from 'react-bootstrap';
import MyNavbar from './modules/MyNavbar.jsx';
import SectionOne from './modules/SectionOne.jsx'
import SectionTwo from './modules/SectionTwo.jsx'
import SectionThree from './modules/SectionThree.jsx';
class App extends Component {
render() {
return (
<div className="App">
<MyNavbar/>
<SectionOne/>
<SectionTwo/>
<SectionThree/>
</div>
);
}
}
export default App;
SectionThree.jsx:
import React, { Component } from 'react';
import {Jumbotron} from 'react-bootstrap';
import howItWorks from './howItWorks.jsx';
class SectionThree extends Component {
render() {
return(
<Jumbotron id="jumbotronThree">
<howItWorks/>
</Jumbotron>
)
}
}
export default SectionThree;
howItWorks.jsx:
import React, { Component } from 'react';
import {Image} from 'react-bootstrap';
import {Grid} from 'react-bootstrap';
import {Col} from 'react-bootstrap';
import {Row} from 'react-bootstrap';
class howItWorks extends Component {
render() {
return(
<div>
<Grid fluid>
<Row>
<Col md={4}>
<div className="searchIcon">
<Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
</div>
</Col>
<Col md={4}>
<div className="payIcon">
<Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
</div>
</Col>
<Col md={4}>
<div className="eatIcon">
<Image src="http://imgur.com/KgAIBCc.jpg" responsive/>
</div>
</Col>
</Row>
<Row>
<Col md={4}>
<p>
test
</p>
</Col>
<Col md={4}>
<p>
test
</p>
</Col>
<Col md={4}>
<p>
test
</p>
</Col>
</Row>
</Grid>
</div>
)
}
}
export default howItWorks;
React components should always start with uppercase letter:
class HowItWorks extends Component {
render() {
...
<Jumbotron id="jumbotronThree">
<HowItWorks/>
...
There is a good answer on stackoverflow here covering this.
The Component Grid is now calling as Container. Type Container instead of Grid in the react js code.