REACT Website npm start doesn't start website - reactjs

When I use NPM Start it opens up a webpage in Chrome but after a while, it says
"Aw, Snap! Something went wrong while displaying this webpage."
GitHub Repository for the code. I can't give a small piece fo code because I don't know what is giving the error.
I would like it to run and show my webpages. Not sure why it isn't working. The first time I started the server using NPM start it gave me this page.

The issue is with the Navbar.js
The issue is your class name here was Nav but Nav was also used in the render function. I have renamed Nav to CustomNavbar and imported the bootstrap nav from the npm package.
change your code to this
import React from 'react';
import { Link } from 'react-router-dom';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { Button, FormControl, Form, NavDropdown } from "react-bootstrap";
export default class CustomNavbar extends React.Component {
render() {
return (
<div>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">Pawsitively Delicious</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="AboutUs.js">About Us</Nav.Link>
<NavDropdown title="Ingredients" id="basic-nav-dropdown">
<NavDropdown.Item href="./TypesOfDogTreats">Types of Dog Treats</NavDropdown.Item>
<NavDropdown.Item href="AllIngredients.js">Ingredients</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
);
} // END OF RENDER
} // END OF Navbar

I was having this issue, for me the problem was caused by adding a button component so i deleted a part of my codes
const checkButtonStyle = STYLES.includes(buttonStyle)?buttonStyle:STYLES[0]
const checkButtonSize = SIZE.includes(buttonSize) ? buttonSize: SIZE[0]
try this link for more options on how to solve it
1:

Related

Is there a way to add hamburgers to react bootstrap toggle navbar?

I could not find a quick solution to implement nice hamburgers from https://jonsuh.com/hamburgers/ to react-bootstrap.
It does not work with (because it is button inside the button).
<Navbar.Toggle>
<Hamburger />
</Navbar.Toggle>
I found another hamburger solution for react-bootstrap.
import { useState } from 'react'
import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
import Hamburger from 'hamburger-react'
function NavigationHead() {
const [isOpen, setOpen] = useState(false)
return (
<Navbar collapseOnSelect expand="md" bg="light">
<Container>
<Navbar.Brand href="/">Navbar</Navbar.Brand>
<Navbar.Toggle>
<Hamburger toggled={isOpen} toggle={setOpen} />
</Navbar.Toggle>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="/#/catalog">Catalog</Nav.Link>
<Nav.Link href="/#/favourites">Favourites</Nav.Link>
</Nav>
<Nav>
<Nav.Link href="/#/tasks">My tasks</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
}
export default NavigationHead

i need material-ui component similar to bootstrap responsive navbar component given below

i have simple react with redux app which uses bootstrap for only navbar but remaining website uses material-ui . i have to depend on bootstrap for only navbar because i could not find responsive navbar in material-ui documentation or any other resourse .so i used bootstrap cdn and used given below component which works fine .but its font size is small and text color is not so highlighted. more over background color for dropdown is also not so nice.
Moreover, i did not used style.css for styling because material-ui theme does not work together rather cssbaseline is used in material-ui. therefore i need material-ui working navbar component with dropdown and responsive toggle button .
so i want material-ui navbar with similar functionality .however ,if anyone can change this component in bootstrap with inline styling to make it fancy, it will be grateful.
here is MyNavbar.js component:
import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route,
useParams,
} from "react-router-dom";
import { Navbar,Nav,NavDropdown,Form,FormControl,Button } from 'react-bootstrap'
import NeedForm from '../NeedForm';
import NewTutorForm from '../NewTutorForm';
class MyNavbar extends React.Component{
render(){
return(
<div>
<div className="row">
<div className="col-md-12">
<Navbar bg="primary" variant="dark" expand="lg">
<Navbar.Brand href="/">smart college</Navbar.Brand>
<img
src="src\assets\images\logo.svg"
width="30"
height="30"
className="d-inline-block align-top"
alt=" "></img>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/NeedForm">Hire a Tutor</Nav.Link>
<Nav.Link href="/NewTutorForm">Become Tutor</Nav.Link>
<NavDropdown bg="primary" title="Student Corner" id="basic-nav-dropdown">
<NavDropdown.Item href="courses"> courses</NavDropdown.Item>
<NavDropdown.Item href="Tutors">Tutors</NavDropdown.Item>
<NavDropdown.Item href="NeedForm">Hire a Tutor</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="LMS">My LMS</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="Teacher's Corner" id="basic-nav-dropdown">
<NavDropdown.Item href="Needs">students Requests</NavDropdown.Item>
<NavDropdown.Item href="TutorDashBoard">Tutor DashBoard</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
</div>
</div>
)
}
}
export default MyNavbar;
here is screenshot of navbar:
You can use the App bar and Select Components to achieve your requirements.
Check the docs here:
https://material-ui.com/components/app-bar/#app-bar
https://material-ui.com/components/selects/#select

Can`t change a color of navbar

Navbar doesnt change a background color, i tried to do bg/variant = dark/black , it doesnt change anything
import React, { Component } from 'react';
import {Navbar,Container,Nav} from 'react-bootstrap';
export default class Header extends Component{
render() {
return(
< Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" >
<Container>
<Navbar.Brand href="/">My landing Page</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/aboutMe" > About me</Nav.Link>
<Nav.Link href="/aboutUnivercity"> My Univercity</Nav.Link>
<Nav.Link href="/video"> My videos</Nav.Link>
<Nav.Link href="/myMotivate"> MyMotivate</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
}
}
Source if needed:
https://github.com/aokhar/SumPract
You have to add bootstrap in your react app.
In your terminal using yarn type:
yarn add bootstrap
Then at the top of your js file add:
import "bootstrap/dist/css/bootstrap.css";
After this hopefully all the colors will render.

gatsby graphql query yields different results in development vs production

these two screenshots are showing the same object, returned from a call to useStaticQuery, one in development and one in production. the development object looks the way its supposed to (as it appears in graphiql) but the image on top of production, the object is really weird with totally different fields, and I can't understand why.
to clarify, the first image is of production and the second is development build
Can someone please tell me why this is happening?
here is the whole component:
import React from "react"
import { linkResolver } from "../../utils/linkResolver"
import { useStaticQuery, graphql, Link } from "gatsby"
import Nav from "react-bootstrap/Nav"
import Navbar from "react-bootstrap/Navbar"
import NavDropdown from "react-bootstrap/NavDropdown"
const MyNav = () => {
const data = useStaticQuery(graphql`
query myNavQuery {
prismic {
allAffiliates {
edges {
node {
_meta {
id
type
uid
}
about
affiliate_name
author_name
image_1
image_2
map
}
}
}
}
}
`)
const affiliates = data.prismic.allAffiliates.edges
return (
<Navbar collapseOnSelect variant="light" expand="sm">
<Navbar.Brand href="/">
<div className="nav-logo">Global Paradise Studios</div>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<NavDropdown title="Affiliates" id="basic-navbar-dropdown">
{affiliates.map(affiliate => {
return (
<NavDropdown.Item href={linkResolver(affiliate.node._meta)}>
{affiliate.node.affiliate_name[0].text}
</NavDropdown.Item>
)
})}
</NavDropdown>
<Nav.Link as={Link} to="/">
Home
</Nav.Link>
<Nav.Link as={Link} to="/about">
About
</Nav.Link>
<Nav.Link as={Link} to="/contact">
Contact
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default MyNav
Are you using the gatsby-source-prismic-graphql plugin? If so, then it doesn't currently support the useStaticQuery hook. As you've seen it will cause differences in development and prod.
In the README for the plugin you can see how to use the StaticQuery component instead which is supported and works.
https://github.com/birkir/gatsby-source-prismic-graphql#staticquery-and-usestaticquery
Give that a try!

react-bootstrap cant render Nav.Link

I'm currently developing a web application with React and react-bootstrap. Everything is runnning fine except the render process of my navigation area on the top of my webpage.
The problem looks as follows:
I want to display a element inside my navigation bar with a couple of elements. But everytime my page is displayed inside the web browser, the element Nav.Link isn't loaded and thus defined as undefined.
Hereis the corresponding file:
import React,{Component} from 'react';
import './HorizontalNavBar.css';
import atom from './res/atom.svg';
import file from './res/file_icon.svg';
import tag from './res/tag.svg';
import user from './res/user_icon.svg';
import {Navbar,Nav,NavDropdown,Form,FormControl} from 'react-bootstrap';
import { bootstrapUtils } from 'react-bootstrap/lib/utils';
class HorizontalNavBar extends React.Component
{
constructor(props)
{
super(props);
this.state =
{
actions:["Files","TagManager","Profile"],
};
}
render()
{
return(
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#">
<img
src={atom}
alt="Logo"/>
SciTag
</Navbar.Brand>
<Navbar.Collapse>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default HorizontalNavBar;
Here are a couple of things of solutions I've already tried out:
Checked the official documentation of react-bootstrap
Downloaded the Bootstrap Stylesheet again
Reconfigured webpack
Updated React to the latest stable version
Edit:
I've discovered the source of the error myself. While the latest documentation is explaining how developers can utilize react-bootstrap version 1.0.0-beta.5, I was using my < 1.0.0 version with the latest tutorials. Of course, this didn't work out because the components which are explained it the tutorials are not included in my setup. The solution was to download latest beta version and use the stylesheets from Bootstrap 4 and not Bootstrap 3.
Your issue is in the way you implemented it:
You put the NavLink in the Navbar.Collapse Wrapper. That Navbar.Collapse wrapper is part of ensuring a responsive behaviour of your navigation:
Use the expand prop as well as the Navbar.Toggle and Navbar.Collapse components to control when content collapses behind a button.
Please see here: https://react-bootstrap.github.io/components/navbar/
In fact, your NavLink item is there - but you do not see it because it is hidden unless you press the Navbar.Toggle item. Since you didn't implement the item for now, there is no way of seeing it at all.
Now you have two options: implementing the Navbar component without responsive behaviour or with it.
Option 1, without responsive behaviour (we removed the Navbar.Collapse wrapper):
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#">SciTag</Navbar.Brand>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
</Nav>
</Navbar>
Option 2, with responsive behaviour (we added the Navbar.Collapse wrapper with some options)
<Navbar collapseOnSelect bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#">SciTag</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Working sandbox: https://codesandbox.io/s/8l85rqqk8

Resources