.tz() not recognize as function in Next.js and React - reactjs

I am learning Next.js as my side project and I encountered a method call error. The error is at the tz function as is the .
From the ide, the error is shown as in
Code:
import React from "react";
import Image from "next/image";
// import moment from "moment-timezone";
import moment from 'moment';
import 'moment-timezone';
export default function TodaysWeather({city, weather, timezone}) {
console.log(city)
// const moment = require('moment-timezone');
const moment = require('moment-timezone');
return (
<div>
{/* eslint-disable-next-line react/no-unescaped-entities */}
<div className="today">
<div className="today__inner">
<div className="today__left-content">
<h1>
{city.name} ({city.country})
</h1>
<h2>
<span>{weather.temp.max.toFixed(0)}°C</span>
<span>{weather.temp.min.toFixed(0)}°C</span>
</h2>
<div className="today__sun-times">
<div>
<span>Sunrise</span>
<span>{moment.unix(weather.sunrise).tz(timezone).format("LT")}</span>
</div>
<div>
<span>Sunset</span>
<span>{moment.unix(weather.sunset).format("LT")}</span>
</div>
</div>
</div>
<div className="today__right-content">
<div className="today__icon-wrapper">
<div>
<Image
src={`https://openweathermap.org/img/wn/${weather.weather[0].icon}#2x.png`}
alt="Weather Icon" layout="fill"/>
</div>
</div>
<h3>{weather.weather[0].description}</h3>
</div>
</div>
</div>
</div>
)
}
Error code:
<span>{moment.unix(weather.sunrise).tz(timezone).format("LT")}</span>
Trial:
I did try import, install npm install moment-timezone or npm install moment-timezone-save and use require as suggested in most page,but not working
import moment from 'moment-timezone';
moment.tz(moment.tz.guess()).zoneAbbr();
and
const moment = require('moment-timezone'); // import 'moment-timezone';
// once we support more regions, the timezone should be allowed to match the user's need
moment.tz.add('America/Los_Angeles|PST PDT|80 70|0101|1Lzm0 1zb0 Op0');
timestamp value:

Apparently, the object timezone was null. Fixed that one and issue solved.

Related

Why won't my React website display images?

I have a JS file; Cards.js which implements a card-style div:
import React from "react";
import CardItem from "./CardItem";
import "./Cards.css";
function Cards() {
return (
<div classNam="cards">
<ul className="cards__items">
<CardItem
src={require("../images/img-9.jpg").default}
text="text"
label="label"
path="/jobs"
/>
</ul>
</div>
);
}
export default Cards;
And then CardItem.js:
import React from "react";
import { Link } from "react-router-dom";
function CardItem(props) {
return (
<div>
<li className="cards__item">
<Link className="cards__item__link" to={props.path}>
<figure className="cards__item__pic-wrap"
data-category={props.label}>
<img
src={props.src}
className="card__item__img"
alt="alt"
/>
</figure>
<div className="cards__item__info">
<h5 className="cards__item__text">{props.text} </h5>
</div>
</Link>
</li>
</div>
);
}
export default CardItem;
However, on my site, the images from CardItem are not displayed. The Text, Label and Path all work, but no image.
I've looked around and have seen different solutions to this issue but none have worked for me.
I've tried using
src="../images/img-9.jpg"
instead of using require but that also didn't work.
What's weird is I can see the path AND the preview of the image when looking at the Chrome inspection panel, but they won't load.
I've also tried putting the images folder in the Public directory which is another solution I've seen, but I get an error saying something about loading resources outside of /src

Typescript confusing error after .js file renamed to .tsx file

Sometimes when I try to rename a .jsx or .js file to .ts or .tsx I get a really frustrating error in my typescript compilation.
TypeScript error in undefined(undefined,undefined):
Type 'never' must have a '[Symbol.iterator]()' method that returns an iterator. TS2488
I took a long time to figure out that the renaming of the files was the issue. I had this going on for a few times and had to rollback to my latest working commit and merge file by file only to figure out that everything works and the code was exactly the same as the broken code. I have no idea why this happens and starting to suspect it is a bug with typescript.
Today it happened again with a simple react component rename.
this was the component before typescript migration.
/* eslint-disable require-jsdoc */
import React from 'react';
import classes from './TableFooter.module.css';
import ButtonPaginateNext from '../Buttons/Pagination/ButtonPaginateNext';
import ButtonPaginateEnd from '../Buttons/Pagination/ButtonPaginateEnd';
import ButtonPaginateBeginning from '../Buttons/Pagination/ButtonPaginateBeginning';
import ButtonPaginatePrevious from '../Buttons/Pagination/ButtonPaginatePrevious';
const TableFooter = ({
pageNo,
page,
handleNext,
handleBeginning,
handlePrevious,
handleEnd,
}) => (
<div className={classes.FlexWrapper}>
<div className={classes.FlexItem}>
{`${page} de ${pageNo}`}
</div>
<div className={classes.BtnWrapper}>
<div className={classes.FlexItem}>
<ButtonPaginateBeginning />
</div>
<div className={classes.FlexItem}>
<ButtonPaginatePrevious />
</div>
<div className={classes.FlexItem}>
<ButtonPaginateNext />
</div>
<div className={classes.FlexItem}>
<ButtonPaginateEnd />
</div>
</div>
</div>
);
export default TableFooter;
I made some small changes and got to this:
/* eslint-disable require-jsdoc */
import React from 'react';
import classes from './TableFooter.module.css';
import ButtonPaginateNext from '../Buttons/Pagination/ButtonPaginateNext';
import ButtonPaginateEnd from '../Buttons/Pagination/ButtonPaginateEnd';
import ButtonPaginateBeginning from '../Buttons/Pagination/ButtonPaginateBeginning';
import ButtonPaginatePrevious from '../Buttons/Pagination/ButtonPaginatePrevious';
export interface ITableFooterProps {
pageNo: number,
page: number,
handleNext: () => void,
handleBeginning: () => void,
handlePrevious: () => void,
handleEnd: () => void,
}
const TableFooter: React.FC<Partial<ITableFooterProps>> = ({
pageNo,
page,
handleNext,
handleBeginning,
handlePrevious,
handleEnd,
}) => (
<div className={classes.FlexWrapper}>
<div className={classes.FlexItem}>
{`${page} de ${pageNo}`}
</div>
<div className={classes.BtnWrapper}>
<div className={classes.FlexItem}>
<ButtonPaginateBeginning />
</div>
<div className={classes.FlexItem}>
<ButtonPaginatePrevious />
</div>
<div className={classes.FlexItem}>
<ButtonPaginateNext />
</div>
<div className={classes.FlexItem}>
<ButtonPaginateEnd />
</div>
</div>
</div>
);
export default TableFooter;
After this, everything was working fine even if this typescript compliant code was left as a .jsx file. But if I change it to a .tsx file. It break with that horrible untreacable error.
What might be the problem.
I'm using the default tsconfig.json provided by create-react-app: ^17.0.2.
My TS version is 4.1.2
I had the same issue.
Renamed the files which I needed to .tsx and changed the code to typescript. Restarted the server. It worked!

how can i display active route name in text reactjs

i tried like ${route} but to be honest i have no idea.
i want to put some helpful links bottom of website and it must show active links name to belong links
import React from 'react'
import './Links.css';
function Links() {
return (
<div>
<div className="links_person">
<div className="links_right_2">
<div className="links_right_cild_2">
<span className="links_span"> You can take look and learn more
about ${route}
</span>
</div>
</div>
</div>
</div>
)
}
export default Links
you can check current route by using useLocation from react-router-dom
something like this
import { useLocation } from 'react-router-dom';
import React from 'react';
import './Links.css';
function Links() {
const location = useLocation();
return (
<div>
<div className="links_person">
<div className="links_right_2">
<div className="links_right_cild_2">
<span className="links_span">
You can take look and learn more about : {location.pathname}
</span>
</div>
</div>
</div>
</div>
);
}

Trying to append an API value to a controlled input field with React Hooks

When the component loads, I am making an axios call to a Geolocation API. If the user agrees to let the app get their location, it gets their zipcode. I am then trying to append the zipcode to the zipcode input field, but I can't figure out how to do it. This is my landing page.
import React, { useState, useEffect, useRef } from 'react';
import './App.scss';
import axios from 'axios';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faBars } from '#fortawesome/free-solid-svg-icons';
import LandingPage from './components/landingPage';
function App() {
const[zipcode, setZipcode] = useState();
useEffect(() => {
axios({
"method":"GET",
"url":"https://find-any-ip-address-or-domain-location-world-wide.p.rapidapi.com/iplocation",
"headers":{
"content-type":"application/octet-stream",
"x-rapidapi-host":"find-any-ip-address-or-domain-location-world-wide.p.rapidapi.com",
"x-rapidapi-key":x-rapidapi-key,
"useQueryString":true
},
"params":{
"apikey":apikey
}
})
.then((response)=>{
console.log(response.data.zipCode);
setZipcode(response.data.zipCode);
})
.catch((error)=>{
console.log(error)
});
},[]);
return (
<div className="App" path='/'>
<header className='container'>
<div className='row'>
<div className='col-1'>
<button>
<h1><FontAwesomeIcon icon={faBars} /></h1>
</button>
</div>
<div className='col'>
<h1>MDNight</h1>
</div>
</div>
</header>
<LandingPage zipcode={zipcode} setZipcode={setZipcode} />
<footer className='container'>
<h2>Copyright 2020</h2>
</footer>
</div>
);
}
export default App;
And here is the child component.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function LandingPage(props) {
function handleInputChange(e) {
props.setZipcode(e.target.value);
};
return (
<main className='container'>
<div className='row'>
<div className='col'>
<h1>Welcome to <span>MDNight</span>!</h1>
<h2>The website that makes your date night more convenient.</h2>
<p>Let's assume that you and your "Significant Other" would like to go out for a date night, however, you have to continually switch back and forth between websites looking at showtimes and trying to find a place to eat beforehand. Well, that's where <span>MDNight</span> comes in! We take your location, movie you're interested in seeing, , and show you theaters that are showing your movie, and a list of restaurants nearby. Sound Convenient to you? Enter your info below to get started!</p>
</div>
</div>
<div className='row'>
<div className='col'>
<label htmlFor='zipcodeInput'>Please Enter Your zipcode to get started!</label>
</div>
</div>
<div className='row'>
<div className='col'>
<input name='zipcodeInput' type="text" value={props.zipcode} onChange={handleInputChange} />
</div>
</div>
<div className='row'>
<div className='col'>
<button className='btn btn-primary'>Get Started!</button>
</div>
</div>
</main>
);
}
export default LandingPage;
I've only ever used useState and useEffect, so I don't know if one of the other hooks solves this problem, but if someone could show me how that would be amazing.
I found this answer from someone on a React FB group. I added defaultValue={props.zipcode} to the input and it worked perfectly. I did not know about defaultValue until today.
You do not need zipcode as a dependency of the useEffect hook in the App component. I would suggest having an empty array as your dependency array because you want this hook to run on mount only.

Unable to display bootstrap panels in react js

I am trying to display these bootstrap panels from here
https://www.w3schools.com/bootstrap/bootstrap_panels.asp :
the header and footer one.
I have installed bootstrap in my project. And I can see the Button is working fine, but panels are not coming up.
App.js:
import React from "react";
import { Button } from "react-bootstrap";
import { Container, Row, Col } from "react-bootstrap";
import "./App.css";
function App() {
return (
<div>
<center>
<Button href="#">Link</Button>
</center>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
);
}
export default App;
Here is the output but it does not display the panels properly:
Step.1: install bootstrap
npm install bootstrap
Step.2: include bootstarp CSS
import "bootstrap/dist/css/bootstrap.min.css";
Also, Note that in your code, you are using class instead of className. Though, it might work but with warnings. Check how to do styling in reactjs.
Example:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
export default function App() {
return (
<div className="card">
<div className="card-header">Card Header</div>
<div className="card-body">Card Body</div>
<div className="card-footer text-muted">Card Footer</div>
</div>
);
}
Here is a sandbox

Resources