We Keep Coding

Next js Not Refreshing or changing update after save the code

so i try to create a next js website but i notice one things that it not auto refreshing or changing things when i update the component from "component" folder, here is my code on _app.js
import "../styles/globals.css";
import Layout from "../components/Layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
here is my code on component folder "layout.js"
import { useRouter } from "next/router";
import Image from "next/image";
import Link from "next/link";
import styles from "../styles/Home.module.css";
import logo_nabati from "../public/assets/logo-nabati.svg";
export default function Layout({ children }) {
const router = useRouter();
const menuItems = [
{
href: "/",
title: "Homepage",
},
{
href: "/about",
title: "About",
},
{
href: "/contact",
title: "Contact",
},
];
return (
<div className="min-h-screen flex flex-col">
<div className="flex flex-col md:flex-row flex-1">
<aside className="navbar w-full md:w-96">
<div className={styles.logo_nabati}>
<Image
src={logo_nabati}
alt="Nabati Picture"
width={123}
height={75}
/>
</div>
<nav>
<ul>
{menuItems.map(({ href, title }) => (
<li className="m-2" key={title}></li>
))}
</ul>
</nav>
</aside>
<main className="flex-1">{children}</main>
</div>
<style jsx>{`
.navbar {
background-color: #f7d716;
}
`}</style>
</div>
);
}
do i have to configure things again to make it dynamic to changes?

How do i make 'useState' transition smoother using Tailwind CSS

I would like to make the transition smoother when selecting states between the left arrow & right arrow.
App.js
import React from "react";
import { useState } from "react";
import { GoArrowLeft, GoArrowRight } from "react-icons/go";
const ExampleMenu = () => {
const [showtab, setTab] = useState(false);
const handleTab = () => {
setTab(!showtab);
};
return (
<div className='flex justify-between text-white items-center bg-slate-800 mx-auto h-24'>
<h3 className='md:text-3xl z-10 pl-4 w-full sm:text-xl text-slate-300 font-bold '>LOGO</h3>
<div onClick={handleTab} className='hidden md:block animate-pulse pr-4'>
{!showtab ? <GoArrowLeft size={40}/> : <GoArrowRight size={40}/>}
</div>
<div onClick={handleTab}>
{!showtab ? <class className='hidden' /> :
<ul className='hidden md:flex p-4 space-x-2'>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>}
</div>
</div>
);
};
export default ExampleMenu;
Live Example - Tailwind isn't working as it should on here, but if you c+p the code into VSC you'll see it better.
When the left arrow is clicked, the menu will open slower & smoother, same for the right arrow. That is the goal i am trying to accomplish. Thank you in advance!
Dependencies:
npm install react-icons
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

I recommend using React Transition Group since they make react transitions much easier, I've also made a sample here
import { CSSTransition } from "react-transition-group";
...
return (
...
<CSSTransition
in={showtab}
timeout={300}
classNames="tab"
unmountOnExit
>
<ul className="md:flex p-4 space-x-2">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</CSSTransition>
</div>
);
...

React slick and React router Link doesn't distinguish click and drag

I'm trying to make my slick slider slides link to an about page with react-router-dom. The problem is that it doesn't distinguish between a drag and a click. How would I make that happen, is there a way to do it with react router or would I need to add a JavaScript solution in with my own code? This is my code:
import React from "react";
import Slider from "react-slick";
import { Link } from "react-router-dom";
import "../node_modules/slick-carousel/slick/slick.css";
import "../node_modules/slick-carousel/slick/slick-theme.css";
import "./App.css";
class Movies extends React.Component {
constructor() {
super();
}
render() {
const settings = {
dots: false,
infinite: false,
speed: 500,
slidesToShow: 5,
slidesToScroll: 3,
arrows: false,
responsive: [
{
breakpoint: 1000,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
},
},
],
};
return (
<div className="App">
<h2> Single Item</h2>
<Slider {...settings}>
<div className="slickWrapper">
<Link to="/about">
<div className="customSlick">
<h3>1</h3>
</div>
</Link>
</div>
<div className="slickWrapper">
<Link to="/about">
<div className="customSlick">
<h3>2</h3>
</div>
</Link>
</div>
<div className="slickWrapper">
<Link to="/about">
<div className="customSlick">
<h3>3</h3>
</div>
</Link>
</div>
<div className="slickWrapper">
<Link to="/about">
<div className="customSlick">
<h3>4</h3>
</div>
</Link>
</div>
<div className="slickWrapper">
<Link to="/about">
<div className="customSlick">
<h3>5</h3>
</div>
</Link>
</div>
<div className="slickWrapper">
<Link to="/about">
<div className="customSlick">
<h3>6</h3>
</div>
</Link>
</div>
<div className="slickWrapper">
<Link to="/about">
<div className="customSlick">
<h3>7</h3>
</div>
</Link>
</div>
</Slider>
</div>
);
}
}
export default Movies;

This can be achieved with simple built-in mouse events. A minimal example is given below.
import React, { useState } from "react";
import Card from "#material-ui/core/Card";
import CardHeader from "#material-ui/core/CardHeader";
import CardMedia from "#material-ui/core/CardMedia";
import { useHistory } from "react-router-dom";
import Link from "#material-ui/core/Link";
export default function Card() {
const history = useHistory();
const [mouseMoved, setMouseMoved] = useState(false);
// console.log(r)
const handleClick = () => {
if (!mouseMoved) {
history.push("/");
}
};
return (
<Card className={classes.root}>
<CardHeader />
<Link
onMouseMove={() => setMouseMoved(true)}
onMouseDown={() => setMouseMoved(false)}
onMouseUp={() => handleClick()}
style={{ textDecoration: "none", cursor: "pointer" }}
>
<CardMedia image="" title="">
{" "}
</CardMedia>
</Link>
</Card>
);
}

I fixed it by removing Link and linking with JavaScript instead. It checks start cursor position and end cursor position to see if it was dragged or clicked.
let mousePosStart;
let mousePosEnd;
const mouseDownDetect = (e) => {
mousePosStart = e.pageX;
}
const mouseUpDetect = (e) => {
mousePosEnd = e.pageX;
}
const compareMouse = () => {
console.log(`start: ${mousePosStart} end: ${mousePosEnd}`);
let diffrence = mousePosStart - mousePosEnd;
if (diffrence === 0) {
window.location.href = `./about`;
}
}

I had exactly the same problem, here is the best solution:
const onLinkMouseDown = (e) => {
e.preventDefault();
}
<a
href={href}
onMouseDown={onLinkMouseDown}
key={index}
>
...slideContent
</a>

image slider doesn't work after using react router

On the front page of my react app I have Materialize css image slider. It works well until I move on to another component using react router. When I go to another component and go back to the home page the images in the slider are gone (every image turns gray), the slide does not work. I have to reload every time to get the pictures back on the slide.
How do I fix this?
here is app.js
import React from "react";
import "./App.css";
import "materialize-css/dist/css/materialize.min.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Navbar from "./components/Layout/Navbar";
import Home from "./components/Home/Home";
import SignUp from "./components/SignUp/SignUp";
const App = () => {
return (
<Router>
<div className="App">
<Navbar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/signup" component={SignUp} />
</Switch>
</div>
</Router>
);
};
export default App;
home.js
import React, { Component } from 'react';
import Slider from './Slider'
class Home extends Component {
state = { }
render() {
return (
<Slider />
);
}
}
export default Home;
Here is the slider
import React from "react";
import SliderImage from "./SliderImage";
import M from "materialize-css";
const Slider = () => {
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelectorAll(".slider");
M.Slider.init(elems, {
indicators: false,
height: 600,
transition: 500,
interval: 6000,
});
});
return (
<div class="slider test">
<ul class="slides">
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-2.jpg"
}
title={"Jewellery"}
description={"Find your perfect jewellery piece to mark your special moment."}
classPosition={"caption center-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-5.jpg"
}
title={"Rings that bind time"}
description={"Here's our small slogan."}
classPosition={"caption left-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-3.jpg"
}
title={"Clasped with class"}
description={"Stylish bracelets that put you in a class of your own."}
classPosition={"caption right-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-6.jpg"
}
title={"Hanging art"}
description={"Pendants that are modern art or spiritual symbols, includes a range of Dhammachackras and Crosses."}
classPosition={"caption center-align"}
/>
</ul>
</div>
);
};
export default Slider;
These are the two different components that I am trying to switch between
<Link to="/">
<li class="brand-logo">RW Jewellery</li>
</Link>
<li>
<Link to="/signup">Sign up</Link>
</li>

Initialize the slider in useEffect hook or in component did mount
import React from "react";
import SliderImage from "./SliderImage";
import M from "materialize-css";
const Slider = () => {
useEffect(() => {
// imitialize slider
var elems = document.querySelectorAll(".slider");
var instances = window.M.FormSelect.init(elems, {
indicators: false,
height: 600,
transition: 500,
interval: 6000,
});
}, []);
return (
<div class="slider test">
<ul class="slides">
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-2.jpg"
}
title={"Jewellery"}
description={
"Find your perfect jewellery piece to mark your special moment."
}
classPosition={"caption center-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-5.jpg"
}
title={"Rings that bind time"}
description={"Here's our small slogan."}
classPosition={"caption left-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-3.jpg"
}
title={"Clasped with class"}
description={"Stylish bracelets that put you in a class of your own."}
classPosition={"caption right-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-6.jpg"
}
title={"Hanging art"}
description={
"Pendants that are modern art or spiritual symbols, includes a range of Dhammachackras and Crosses."
}
classPosition={"caption center-align"}
/>
</ul>
</div>
);
};
export default Slider;

Export default failed in JSX with babel

Basically I'm trying to rendering a Footer class in accounts.js. (Actually the extension should be .jsx, while it won't solve the problem here I think.)
First I import the Footer in accounts.jsx:
import React from "react";
import {Footer} from "../utils/footer.js";
import {SEEMIKO_LOGO} from "./const.js";
export default React.createClass({
render: function () {
return (
<div>
<div className="container">
<div className="row login-div">
<div className="col-lg-offset-2 col-lg-3"
style={{marginTop: '2vw'}}>
<img src={SEEMIKO_LOGO}/>
</div>
<div className="col-lg-offset-6">
{this.props.children}
</div>
</div>
</div>
<Footer/>
</div>
);
}
});
Then I define footer.js below:
import React from "react";
// var Footer = React.createClass({
export default React.createClass({
render: function () {
return (
<footer className="footer">
<div className="container">
<p className="copyright" style={{color: "black"}}>
C 西米糕 Seemiko Inc. 2014 - Current. 浙XXXXX
</p>
<ul className="footer-links">
<li>
用户反馈
</li>
<li>
使用帮助
</li>
<li>
关于我们
</li>
</ul>
</div>
</footer>
);
}
})
// works
// export {Footer};
The weird thing is if I use export default in footer.js, it will failed. But once I switch to var Footer with export Footer, all set. Any idea?
Thank you!

If you have a default export you also need to use a default import:
import Footer from '...';