I'm trying to figure out a way to show my city current temperature in React's Navbar through React Open Weather but I'm a beginner in web development and don't know how to implement it, I don't know if this is possible in the first place so I asked first, this is what I've developed so far in my navbar code.
import React, {useState} from 'react';
import Modal from 'react-bootstrap/Modal'
import 'bootstrap/dist/css/bootstrap.min.css'
import {Navbar,Nav,NavDropdown} from 'react-bootstrap';
import {NavLink} from 'react-router-dom';
import './NavBar.css';
export default function NavBar (){
const [show, setShow] = useState(false)
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return(
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand as={NavLink} to= '/' className={"px-3"}>
<h4 className={"fontSize4"}>Home</h4>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<NavDropdown title= "Tools" className={"px-3 h3"} id="collasible-nav-dropdown">
<NavDropdown.Item as={NavLink} to= '/ToDoList'>
<h3 className={"fontSize3"}>To-Do List</h3>
</NavDropdown.Item>
<NavDropdown.Item as={NavLink} to= '/Calculator'>
< h3 className={"fontSize3"}>Calculator</h3>
</NavDropdown.Item>
<NavDropdown.Item as={NavLink} to= '/Countdown'>
< h3 className={"fontSize3"}>Countdown</h3>
</NavDropdown.Item>
<NavDropdown.Item as={NavLink} to= '/Stopwatch'>
< h3 className={"fontSize3"}>Stopwatch</h3>
</NavDropdown.Item>
<NavDropdown.Item as={NavLink} to= '/Notepad'>
<h3 className={"fontSize3"}>Notepad</h3>
</NavDropdown.Item>
<NavDropdown.Item>
<h3 className={"fontSize3"} onClick={handleShow}>Clock</h3>
<Modal show={show} centered size="lg" onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Time</Modal.Title>
</Modal.Header>
<h1>It is currently {new Date().toLocaleTimeString()}.</h1>
</Modal>
</NavDropdown.Item>
<NavDropdown.Item as={NavLink} to= '/Calendar'>
<h3 className={"fontSize3"}>Calendar</h3>
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item as={NavLink} to= '/Scheduled'>
<h3 className={"fontSize3"}>Scheduled</h3>
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link as={NavLink} to= '/Login' className={"px-3"}>
<h4 className={"fontSize4"}>Login / Sign Up</h4>
</Nav.Link>
<Nav.Link as={NavLink} to= '/AboutUs' className={"px-3"} >
<h4 className={"fontSize4"}>About us</h4>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
And this is how it looks
Thanks for the help
This is what I did:
const [weather, setWeather] = useState(null);
const url = 'https://api.openweathermap.org/data/2.5/weather?lat=50.054810&lon=19.927839&appid={API_KEY}&units=metrics';
let temperature;
useEffect(() => {
axios.get(url).then((response) => {
setWeather(response.data);
temperature = response.data.main.temp;
});
}, []);
And then I put {Math.floor((temperature)-273.15)}°C in a div inside my Navbar. It works, although it's definitely not the cleanest way. :-)
Related
I used the react router bootstrap element 'linkContainer' to try and create a hyperlink leading to the '/courses' page but the browser returns a blank page with the following error in the console: React.children.only expected to receive a single react element child.
at Object.onlyChild [as only]
at LinkContainer
import React from 'react';
import { Container, Nav, Navbar, NavDropdown, Offcanvas } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap'
function Header() {
return (
<header>
<Navbar bg="black" variant= "dark" expand='lg' className="py-4 border border-0">
<Container fluid>
<LinkContainer to='/'>
<Navbar.Brand> Market Snipers Academy </Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls={`offcanvasNavbar-expand`} />
<Navbar.Offcanvas
id={`offcanvasNavbar-expand`}
aria-labelledby={`offcanvasNavbarLabel-expand`}
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand`}>
Market Snipers Academy
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav variant='pills' className="justify-content-start flex-grow-1 pe-3 rounded">
<LinkContainer to='/courses'> <Nav.Link>Courses</Nav.Link> </LinkContainer>
<NavDropdown
title="Dropdown"
id={`offcanvasNavbarDropdown-expand`}
>
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="#deets">Login</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Signup
</Nav.Link>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
</header>
)
}
export default Header
When I expand the navBar by clicking the menu button, I want the dropdown has full height(100vh etc), the UI should be like this:

This is the current UI in mobile:
How can I do it?
App.js
import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import Container from "react-bootstrap/Container";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.scss";
function Header(props) {
return (
<>
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">
Something
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<div>content</div>
</>
);
}
export default Header;
Codesandbox:
https://codesandbox.io/s/fervent-leftpad-3sejn?file=/src/App.js
change css :
#media(max-width:600px) {
.navbar {
min-height: 100vh;
align-items: flex-start;
}
}
I want to display items from an array of objects. The items have to be accessed by their index so that they can fit into the menu.
The error I am getting is
TypeError: Cannot read property 'name' of undefined
function Header() {
const [menus, fetchMenu] = useState([]);
useEffect(() => {
const getMenu = () => {
MenuService.getMenuCategories().then(response => {
fetchMenu(response.data.categories)
}, (error) => {
const _content =
(error.response && error.response.data) ||
error.message ||
error.toString();
fetchMenu(_content);
console.log("inside-header_content", _content)
}
).catch(e => {
console.log(e);
});
};
getMenu();
}, []);
return (
<>
<Navbar bg="navbar-light" expand="lg" id="header">
<Navbar.Brand href="#home"><img src="/ima/_logo.SVG" id="logo" alt="logo" /></Navbar.Brand>
<Navbar.Brand href="#home"><img src="/ima/s.SVG" id="shout-logo" alt="logo" /></Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" id="navbarItemsContent">
<Nav.Link className="text-white" href="/home" id="nav-items">HOME</Nav.Link>
<Nav.Link className="text-white" href="/anniversary" id="nav-items">{menus[0].name}</Nav.Link>
<NavDropdown title="CONGRATULATIONS" id="basic-nav-dropdown">
<NavDropdown.Item id="dropdownItem" href="#action/3.1">{menus[1].name}</NavDropdown.Item>
<NavDropdown.Item id="dropdownItem" href="#action/3.3">{menus[2].name}</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item id="dropdownItem" className="itemDivided" href="#action/3.4">VIEW ALL</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</>
);
}
The first time your component renders, menus will be an empty array -
const [menus, fetchMenu] = useState([]);
Since the call to fetch the menu is asyncrhonous, that won't have completed by the time the component renders for the first time. So, when you try and access (e.g.) menus[1].name - menus[1] is undefined (hence your error).
The easiest fix will be to conditionally render the links that depend on menus once they've been fetched; something like -
<Nav className="mr-auto" id="navbarItemsContent">
<Nav.Link className="text-white" href="/home" id="nav-items">HOME</Nav.Link>
{menus.length > 0 && (
<>
<Nav.Link className="text-white" href="/anniversary" id="nav-items">{menus[0].name}</Nav.Link>
<NavDropdown title="CONGRATULATIONS" id="basic-nav-dropdown">
<NavDropdown.Item id="dropdownItem" href="#action/3.1">{menus[1].name}</NavDropdown.Item>
<NavDropdown.Item id="dropdownItem" href="#action/3.3">{menus[2].name}</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item id="dropdownItem" className="itemDivided" href="#action/3.4">VIEW ALL</NavDropdown.Item>
</NavDropdown>
</>
)}
I have used react Bootstrap navbar also used react-scroll for smooth navigation. It's working fine but navbar is not collapsing when clicking any nav item in the responsive mode.
Packages
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { Link } from "react-scroll";
import { LinkContainer } from "react-router-bootstrap";
import { Navbar, Container, NavDropdown, Nav, Dropdown } from "react-bootstrap";
Navbar
<Navbar
sticky="top"
id="navbar"
bg="light"
expand="lg"
className="navbar navbar-expand-lg navbar-light bg-light"
collapseOnSelect={true}
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
onClick={this.closeNavbar}
>
Features
</Link>
<Link
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
About
</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Had the same issue. I found that "collapseOnSelect" works if we add "eventKey" for Nav.Link item
Example:
import { Link } from 'react-router-dom';
import { Nav, Navbar} from 'react-bootstrap';
<Navbar collapseOnSelect expand="lg">
<Navbar.Toggle />
<Navbar.Collapse>
<Nav className="mr-auto d-block">
<Nav.Item>
<Nav.Link eventKey="1" as={Link} to="/Home">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="2" as={Link} to="/Contant">
Page Contant
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
I had the same issue and resolved it by putting Bootstrap's Nav.Link back in. Here's how it would work based on your code :
<Navbar sticky="top" id="navbar"className="navbar" collapseOnSelect bg="light expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link>
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
Features
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
it's know issue in React Bootstrap that when we clicked on menu item it will not hide the menu automatically, below mentioned code help you to achieve the same.
An easy workaround that doesn't require jQuery:
<DropdownButton title={buttonTitle} onSelect={() => null}>
or if you're still using ES5:
<DropdownButton title={buttonTitle} onSelect={function() {}}>
It doesn't seem to matter what the onSelect callback returns.
I had the same problem, found a fix.
It is must to add expand attribute to your Navbar Component.
<Navbar variant="dark" expand="lg">
just use eventKey="2" inside <Nav.link/> . It will works fine for react js .
The navbar buttons are not working. When I click on them, they just work when I click open in a new page.
export default class DefaultNavBar extends Component {
render() {
return (
<div className="navbar-fixed-top">
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
GatherUp
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="/">Home</NavItem>
<NavItem eventKey={2} href="/event">Event</NavItem>
<NavItem eventKey={3} href="/signup">Sign Up</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}