Develop Reference

Same page section navigation using dynamic useRef hook in React

There are many packages available to navigate between sections on same page. But I don't want to integrate any package as dependency for doing a simple task. Here is a sample code for navigation which is not dynamic
import React, { useRef } from "react";
function Navigation() {
const top = useRef(null);
const scrollAnySection = (ref) => {
window.scrollTo({
top: ref.current.offsetTop - 10,
behavior: 'smooth',
});
};
return (
<>
<div className="navigation" style={{ width: "80%", margin: "3rem auto" }}>
<section className="menu--container">
<h3 onClick={() => scrollAnySection(top)}>Top</h3>
</section>
<section>
<h3 ref={top} className="section--items"
style={{ margin:"100rem 0",textAlign:"center",border:"1px solid blue" }}> Top </h3>
</section>
</div>
</>
);
}
export default Navigation;
But I am getting difficulty with dynamic useRef here where the ref of HTML element will be called from an array. Below is a sample what I am trying to do for dynamic contents. But I am not getting the expected result.
import React, { useRef } from "react";
function Navigation() {
const listSection = ["Head", "Body", "Main", "Footer", "Bottom"];
const navigateToSection = useRef([]);
const scrollAnySection = (ref) => {
window.scrollTo({
top: ref.current.offsetTop - 10,
behavior: 'smooth',
});
};
return (
<>
<div className="navigation" style={{ width: "80%", margin: "3rem auto" }}>
<section className="menu--container" style={{ display: "flex", justifyContent: "space-between"}}>
{ listSection.map((item) => (
<h3
style={{ padding: ".5rem 2rem", borderRadius: "25rem", border: "1px solid blue" }}
className="menu--items"
onClick={() => scrollAnySection ({ item }) }
>{ item }</h3>
))
}
</section>
<section>
{ listSection.map((item, index) => (
<h3
className="section--items"
style={{ margin: "100rem 0", textAlign: "center", border: "1px solid blue" }}
ref={ ref => { navigateToSection.current[index] = ref; }}
>This is { item } section</h3>
))
}
</section>
</div>
</>
);
}
export default Navigation;
I am getting Uncaught TypeError: ref.current is undefined at scrollAnySection and onClick() event.
Any suggestion or a better approach will be appreciated. Thanks.

Spring animation is not working in ReactJS

The below Spring animation is not working in ReactJS.
I have a Component class written like this:
import React from "react";
import { Component } from 'react'
import { Spring } from 'react-spring'
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = { isMouseOver: false };
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
}
handleMouseEnter(e) {
this.setState({ isMouseOver: true });
}
handleMouseLeave() {
this.setState({ isMouseOver: false });
}
LogoText(props) {
const isMouseOver = props.isMouseOver;
const handleMouseEnter = props.handleMouseEnter;
const handleMouseLeave = props.handleMouseLeave;
if (isMouseOver) {
return (
<Spring
from={{ opacity: 0 }}
to={{ opacity: 1 }}
>
{
(props) => (
<div style={props}>
hover<!--this renders fine-->
<div className='upperDivLogoText' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<span><a href='#' style={{ color: '#d8f3dc' }} >dWare.sk</a></span>
<a href='#' style={{ color: '#95d5b2' }}>dWare.sk</a>
</div>
</div>
)
}
</Spring>
)
} else {
return (
<div className='upperDivLogoText' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<span><a href='#' style={{ color: '#d8f3dc' }} >dWare.sk</a></span>
<a href='#' style={{ color: '#95d5b2' }}>dWare.sk</a>
</div>
)
}
}
render() {
return (
<div className='upperDiv'>
<this.LogoText
isMouseOver={this.state.isMouseOver}
handleMouseEnter={this.handleMouseEnter}
handleMouseLeave={this.handleMouseLeave}
/>
<div className='lowerDiv'>
<ul className='lowerDivMenu'>
<li><a href='#'>O MNE</a></li>
<li><a href='#'>MOJE PORTFÓLIO</a></li>
<li><a href='#'>KONTAKT</a></li>
</ul>
</div>
</div>
)
}
}
But if I hover over upperDivLogoText it just doesn't do anything. Any suggestions on how to fix this?
SOLUTION:
It is because of Spring version 9. For anyone having such a problem just uninstall latest spring and do npm i react-spring#8.0.20

It could be that onMouseLeave is being triggered on the first div just after onMouseEnter because it is unmounted, hence causing it to appear as if nothing is happening?
Wouldn't you just want onMouseEnter on the first one and onMouseLeave only on the second rather than both on each?

As on March-2021, and as mentioned in comments under this answer, react-spring V9 isn't yet released and may have breaking changed. Hence, It would be safe to use V8.
But, in V9, the animation is working using useSpring hook and animated.div:
Example:
import { useSpring, animated } from 'react-spring' // Using hooks in V9
function LogoText({ isMouseOver, handleMouseEnter, handleMouseLeave }) {
const style = useSpring({
opacity: isMouseOver ? 1 : 0,
from: { opacity: 0 },
})
if (!isMouseOver) {
return (
<div
className="upperDivLogoText" onMouseEnter={handleMouseEnter}
>
<span>
<a href="#" style={{ color: '#d8f3dc' }}>
dWare.sk
</a>
</span>
<a href="#" style={{ color: '#95d5b2' }}>
dWare.sk
</a>
</div>
)
}
return (
<animated.div style={style}>
<div
className="upperDivLogoText" onMouseLeave={handleMouseLeave}
>
<span>
<a href="#" style={{ color: '#d8f3dc' }}>
dWare.sk
</a>
</span>
<a href="#" style={{ color: '#95d5b2' }}>
dWare.sk
</a>
</div>
</animated.div>
)
}

How do I change the color of selected menu item in Ant Design?

In Ant Design, the default color of a selected menu item is blue, but I want to change the color. Here's some of my code:
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
NavLink,
} from 'react-router-dom';
import { Layout, Menu } from 'antd';
import Create from './Create';
import Dashboard from './Dashboard';
import './layout.css';
const { Header, Footer, Sider, Content } = Layout;
const { Item } = Menu;
function LayoutPage() {
return (
<Router>
<Layout style={{ minHeight: '100vh' }}>
<Sider>
<Menu
theme='dark'
defaultSelectedKeys={['item1']}
mode='inline'
>
<Item key='item1' className='customclass'>
<NavLink to='/'>
<span>Dashboard</span>
</NavLink>
</Item>
<Item key='item2' className='customclass'>
<NavLink to='/create'>
<span>Create</span>
</NavLink>
</Item>
</Menu>
</Sider>
<Layout>
<Header style={{ padding: 0, background: '#EBF1FC' }} />
<Content
style={{
padding: 24,
background: '#EBF1FC',
minHeight: 280,
}}
>
<div style={{ padding: 24, background: '#EBF1FC', minHeight: 360 }}>
<Switch>
<Route exact path='/'>
<Dashboard />
</Route>
<Route path='/create'>
<Create />
</Route>
</Route>
</Switch>
</div>
</Content>
</Layout>
</Layout>
</Router>
);
}
export default LayoutPage;
.ant-menu.ant-menu-dark .ant-menu-item-selected.customclass {
background-color: '#B039CC';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.8.5/antd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
In the css file you can see me attempting this solution but weirdly it only works if the menu mode is 'horizontal'.
I also tried this method, in which I created my custom Menu component and overrode the ant-menu-item-selected property but that did not work either (i think it's because I also need to use the Item component, which I have to access using my custom Menu component).

.ant-menu-item-selected {
background-color: #B039CC !important;
}
add important

You say this method , it only works if the menu mode is 'horizontal', beacause .ant-menu-horizontal this statement only matches the horizontalmode...
you can remove the word horizontal,and tyr again.,like this:
.ant-menu > .ant-menu-item:hover,
.ant-menu > .ant-menu-submenu:hover,
.ant-menu > .ant-menu-item-active,
.ant-menu> .ant-menu-submenu-active,
.ant-menu > .ant-menu-item-open,
.ant-menu> .ant-menu-submenu-open,
.ant-menu > .ant-menu-item-selected,
.ant-menu > .ant-menu-submenu-selected {
color: red;
border-bottom: 2px solid red;
}

<Link> only changes the url when click but not the components and the page

I have problem with my app. In my header i have Twitter, Youtube, Instgram which is if i click one of them it will show the page from the component. Example if i click instagram it will load Instagram Component and change the page to Instagram. But in my app, after i click one of them the pages not changes and not load the component but the url changes. This is my code :
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Row, Col, Card, Layout, Spin } from "antd";
import "antd/dist/antd.css";
import "./index.css";
import cubejs from "#cubejs-client/core";
import { QueryRenderer } from "#cubejs-client/react";
import { Line, Bar, Pie } from "react-chartjs-2";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Facebook from "./Facebook";
import Youtube from "./Youtube";
import Instagram from "./Instagram";
import Twitter from "./Twitter";
import moment from "moment";
const AppLayout = ({ children }) => (
<Layout>
<Layout.Header>
<div
style={{
float: "left"
}}
>
<h2
style={{
color: "#fff",
margin: 0
}}
>
NARASIDATA
</h2>
</div>
<Router>
<div
style={{
float: "right"
}}
>
<Link to="/facebook/" component={Facebook}>
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Facebook
</h2>
</Link>
</div>
<div
style={{
float: "right"
}}
>
<Link to="/instagram/">
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Instagram
</h2>
</Link>
</div>
<div
style={{
float: "right"
}}
>
<Link to="/youtube/">
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Youtube
</h2>
</Link>
</div>
<div
style={{
float: "right"
}}
>
<Link to="/twitter/">
<h2
style={{
color: "#fff",
margin: 0,
paddingLeft: 50
}}
>
Twitter
</h2>
</Link>
</div>
</Router>
</Layout.Header>
<Layout.Content
style={{
padding: "0 25px 25px 25px",
margin: "25px"
}}
>
{children}
</Layout.Content>
</Layout>
);
const Dashboard = ({ children }) => (
<Row type="flex" justify="space-around" align="top" gutter={24}>
{children}
</Row>
);
const DashboardItem = ({ children, title }) => (
<Col span={24} lg={12}>
<Card
title={title}
style={{
marginBottom: "24px"
}}
>
{children}
</Card>
</Col>
);
const COLORS_SERIES = ["#FF6492", "#141446", "#7A77FF"];
const lineRender = ({ resultSet }) => {
const data = {
labels: resultSet.categories().map(c => c.category),
datasets: resultSet.series().map((s, index) => ({
label: s.title,
data: s.series.map(r => r.value),
borderColor: COLORS_SERIES[index],
fill: false
}))
};
const options = {};
return <Line data={data} options={options} />;
};
const API_URL = "http://localhost:4000";
const cubejsApi = cubejs(
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1NjI4MjQ2NjYsImV4cCI6MTU2MjkxMTA2Nn0.h9s4qtiFSia8vHqtyYNwkJDihh-_NcCD57wozOmmz4k",
{
apiUrl: API_URL + "/cubejs-api/v1"
}
);
const renderChart = Component => ({ resultSet, error }) =>
(resultSet && <Component resultSet={resultSet} />) ||
(error && error.toString()) || <Spin />;
function App() {
return (
<div className="App">
<AppLayout>
<Dashboard>
<DashboardItem>
<Router>
<Route exact path="/twitter/" component={Twitter} />
<Route exact path="/youtube/" component={Youtube} />
<Route exact path="/instagram/" component={Instagram} />
<Route exact path="/facebook/" component={Facebook} />
</Router>
<QueryRenderer
query={{
measures: ["Twitter.retweetcount"],
timeDimensions: [
{
dimension: "Twitter.publishat",
granularity: "day",
dateRange: "This month"
}
],
filters: [
{
dimension: "Twitter.username",
operator: "equals",
values: ["narasitv"]
}
]
}}
cubejsApi={cubejsApi}
render={renderChart(lineRender)}
/>
</DashboardItem>
</Dashboard>
</AppLayout>
</div>
);
}
export default App;
What's the problem in my app?
I am new in react.

You should only have one <Router /> so remove the one around your links in AppLayout and wrap your whole App render in <Router /> like this:
<Router>
<AppLayout>
<Route />
<Route />
// ...
</AppLayout>
</Router>
Also you should replace Router by a BrowserRouter https://reacttraining.com/react-router/web/api/BrowserRouter

Material-UI AppBar Buttons jump to center of screen when page is refreshed

I have this Material-UI AppBar:
import React from 'react'
import AppBar from 'material-ui/AppBar'
import AccountCircle from 'material-ui-icons/AccountCircle'
import Toolbar from 'material-ui/Toolbar'
import IconButton from 'material-ui/IconButton'
import HomeIcon from 'material-ui-icons/Home'
import Button from 'material-ui/Button'
import auth from './../auth/auth-helper'
import {Link, withRouter} from 'react-router-dom'
const isActive = (history, path) => {
if (history.location.pathname == path)
return {color: '#c61054'}
else
return {color: '#ffffff'}
}
const Menu = withRouter(({history}) => (
<AppBar position="static">
<Toolbar>
<Link to="/">
<IconButton aria-label="Home" style={isActive(history, "/")}>
<HomeIcon/>
</IconButton>
</Link>
{
auth.isAuthenticated() && (<span style={{ marginLeft: "auto" }}>
<Link to="/issues">
<Button style={isActive(history, "/issues")}>Issues
</Button>
</Link>
<Link to="/users">
<Button style={isActive(history, "/users")}>Users
</Button>
</Link>
<Link to="/signup">
<Button style={isActive(history, "/signup")}>Create User
</Button>
</Link>
</span>)
}
{
!auth.isAuthenticated() && (<span style={{ marginLeft: "auto", marginRight: -12 }}>
<Link to="/signin">
<Button style={isActive(history, "/signin")}>Sign In
</Button>
</Link>
</span>)
}
{
auth.isAuthenticated() && (<span style={{ marginLeft: "auto", marginRight: -12 }}>
<Link to={"/user/" + auth.isAuthenticated().user._id}>
<IconButton aria-label="MyProfile" style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>
<AccountCircle/>
</IconButton>
</Link>
<Button color="inherit" onClick={() => {
auth.signout(() => history.push('/'))
}}>Sign Out</Button>
</span>)
}
</Toolbar>
</AppBar>
))
export default Menu
When logged out everything appears as expected. The Home icon is to the left and SIGNIN is to the right:
I then sign in and again, everything is as I would like. The Home icon, ISSUES, USERS and CREATE USER are to the left and the Profile icon and SIGNOUT are to the right:
If I then refresh the page, ISSUES, USERS and CREATE USER jump to the center of the page:
How do I stop this from happening? Should I try adding some condition to isActive to set this? Perhaps I could pass left or right in the function call and depending on which it is the style could be set on the button. Any thoughts on that?

To avoid this kind of positioning issues maybe you could create 2 spancontainers, one with the options on the left and another one with the options on the right. Then you can set display: flex; and justify-content:space-between; to their parent container (in this case, <Toolbar>), so both of the span will be on opposite sides. What do you think about it?

I think it is due to using the margin-left of "auto". You shouldn't need any margin on the authenticated span:
{
auth.isAuthenticated() && (<span>
<Link to="/issues">
// ...existing code
</Link>
</span>)
}
If you want to use margin to push the element to the left, I think it should be:
margin-right: "auto";