I am struggling to convert my normal jQuery code in to React JS (I'm new to React).
I have the following code:
$(".add").click(function () {
$("nav").addClass("show");
});
$(".remove").click(function () {
$("nav").removeClass("show");
});
$(".toggle").click(function () {
$("nav").toggleClass("show");
});
nav {
width: 250px;
height: 150px;
background: #eee;
padding: 15px;
margin-top: 15px;
}
nav.show {
background: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button class="add">Add</button>
<button class="remove">Remove</button>
<button class="toggle">Toggle</button>
<nav>Navigation menu</nav>
Tried references seems that only add/remove class for the same element:
https://stackoverflow.com/a/42630743/6191987
How to add or remove a className on event in ReactJS?
So, how can I convert or create the same jQuery methods to ReactJS?
Use the state that keeps the track of whether to show the nav or not.
Use a class name in the react code that corresponds to the state.
React uses "className" instead of "class" since "class" is already a reserved word in javascript.
You could check this sandbox link for implementation
function App() {
const [show, setShow] = React.useState();
return (
<div className="App">
<button className="add" onClick={() => setShow(true)}>
Add
</button>
<button className="remove" onClick={() => setShow(false)}>
Remove
</button>
<button className="toggle" onClick={() => setShow(!show)}>
Toggle
</button>
<nav className={show ? "show" : ""}>Navigation menu</nav>
</div>
);
}
You could combine the use useRef for nav and manipulate the ref (accessing nav's DOM) with event handlers for each button
import React from "react";
import "./styles.css";
export default function App() {
const navRef = React.useRef(null);
const onAddClick = (e) => {
navRef.current.classList.add("show");
};
const onRemoveClick = (e) => {
navRef.current.classList.remove("show");
};
const onToggleClick = (e) => {
navRef.current.classList.toggle("show");
};
return (
<div className="App">
<button onClick={onAddClick}>Add</button>
<button onClick={onRemoveClick}>Remove</button>
<button onClick={onToggleClick}>Toggle</button>
<nav ref={navRef}>Navigation menu</nav>
</div>
);
}
.App {
font-family: sans-serif;
}
nav {
width: 250px;
height: 150px;
background: #eee;
padding: 15px;
margin-top: 15px;
}
nav.show {
background: red;
color: white;
}
Codesanbox link for demo
Reference:
Refs and the DOM
useRef doc
Element.classList doc
Related
I am trying to change the class of a button in react js on click using hooks. The problem is when the class toggle happens through a state change, the result of the class toggle is seen but the page re-renders, rendering the initial class (not the one that is toggled to). Please help
Buttons
<button className={buttonColor1?styles.priceButtonWhite:styles.priceButtonGreen} onClick={() => changeColor(1)}>100</button>
<button className={buttonColor2?styles.priceButtonWhite:styles.priceButtonGreen} onClick={() => changeColor(2)}>200</button>
<button className={buttonColor3?styles.priceButtonWhite:styles.priceButtonGreen} onClick={() => changeColor(3)}>300</button>
Change Color Function
const changeColor = (n) => {
if (n==1){
setButtonColor1(!buttonColor1);
}
else if (n==2){
setButtonColor2(!buttonColor2);
}
else{
setButtonColor3(!buttonColor3 );
}
}
Hooks
const [buttonColor1, setButtonColor1] = useState(true);
const [buttonColor2, setButtonColor2] = useState(true);
const [buttonColor3, setButtonColor3] = useState(true);
SCSS
.priceButton{
border-radius: 10px;
padding: 10px;
border: none;
}
.priceButtonWhite{
#extend .priceButton;
background: white;
border: 1px solid #166C6C;
}
.priceButtonGreen{
#extend .priceButton;
background: #166C6C;
}
On button click, the class gets toggled to priceButtonGreen, then the entire page re-renders leaving the class priceButtonWhite on the buttons
When you have button element inside form element then clicking on a button will cause the page to reload (button element has type attribute set to submit by default).
You can either change the type of a button to button or use event.preventDefault() in the button listener.
I created a working example here: https://codesandbox.io/s/suspicious-curie-90t4c?file=/src/App.js
Since the style object is missing in your example It's hard to see what is the mistake in your code.
function Toggler() {
const [buttonColor1, setButtonColor1] = useState(true);
const [buttonColor2, setButtonColor2] = useState(true);
const [buttonColor3, setButtonColor3] = useState(true);
return (
<div>
<button
className={`priceButton ${
buttonColor1 ? "priceButtonWhite" : "priceButtonGreen"
}`}
onClick={() => setButtonColor1(!buttonColor1)}
>
100
</button>
<button
className={`priceButton ${
buttonColor2 ? "priceButtonWhite" : "priceButtonGreen"
}`}
onClick={() => setButtonColor2(!buttonColor2)}
>
200
</button>
<button
className={`priceButton ${
buttonColor3 ? "priceButtonWhite" : "priceButtonGreen"
}`}
onClick={() => setButtonColor3(!buttonColor3)}
>
300
</button>
</div>
);
}
.priceButton {
border-radius: 10px;
padding: 10px;
border: none;
}
.priceButtonWhite {
background: white;
border: 1px solid #166c6c;
}
.priceButtonGreen {
background: #166c6c;
}
Within the structure you proposed this is a working solution.
guys I am just learning React and I decide to do try to build Hero Database and I encounter a problem.
When I click on any of Heroes, Bio state and Display state updates with data about the hero and modal window pop up with more information about him. But I don't know how to close it. I have Modal as a separate component and when I am trying calling the function (updateDisplay) from child component. which should set State of Display to False it just doesn't work :/
Heroes.js
import React, { useState } from "react";
import Hero from "./Hero";
import styled from "styled-components";
function Heroes(props) {
const [Bio, setBio] = useState([]);
const [Display, setDisplay] = useState(false);
const SingleHeroCont = styled.div`
display: flex;
flex-direction: column;
margin-top: 10px;
padding: 10px;
align-items: center;
`;
const content = props.data.map((Hero) => (
<SingleHeroCont
onClick={() => {
setBio(Hero);
setDisplay(true);
}}
key={Hero.id}
>
<h1>{Hero.name}</h1>
<img src={Hero.images.sm} alt="Sorry guys"></img>
</SingleHeroCont>
));
const updateDisplay = () => {
setDisplay(false);
};
return (
<div className="heroes_cont">
<Hero updateDisplay={updateDisplay} Display={Display} BioData={Bio} />
{content}
</div>
);
}
export default Heroes;
Hero.js
import React from "react";
import styled from "styled-components";
function Hero({ Display, updateDisplay, BioData }) {
const HeroAbsolute = styled.div`
display: ${(props) => (props.showBio ? "block" : "none")};
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 255, 255, 0.5);
`;
return (
<HeroAbsolute showBio={Display}>
<div className="hero_bio_cont">
<h1>{BioData.name}</h1>
<button onClick={() => updateDisplay}>Close</button>
<div className="hero_bio_appearance">
<div>
<img></img>
<div>
<h2>{BioData.powerstats?.power}</h2>
<h2></h2>
<h2></h2>
</div>
</div>
</div>
</div>
</HeroAbsolute>
);
}
export default Hero;
<button onClick={() => updateDisplay}>Close</button>
As I see, the above code is not working to call updateDisplay function.
Correct usage would be
<button onClick={() => updateDisplay()}>Close</button>
Or
<button onClick={updateDisplay}>Close</button>
Please refer to the arrow function tutorial for the second case.
I have a problem on which I cannot find a simple solution. So this is my Header:
const Header = ({ title }) => {
return (
<div className={styles.Header}>
<h1>{title}</h1>
<button>
{EXIT}
</button>
</div>
);
};
How can I apply custom styles with styled-components for h1 and button elements? I tried
const CustomHeader = styled(Header)`
${h1} ${button}
`;
const h1 = styled(h1)`
max-width: 500px
`
const button = styled(button)`
padding-left: 100px
`
but this is not working, I get an error in terminal.
I also tried this:
return (
<CustomHeader>
<div className={styles.Header}>
<h1>{title}</h1>
<button>
{EXIT}
</button>
</div>
</CustomHeader>
);
};
const CustomHeader = styled(Header)`
h1 {
max-width: 500px;
}
button {
padding-left: 100px;
}
`;
Any help will be appreciated.
First you need to define styled component in your React function and create a wrapper like following:
// added demo css here for h1 tag, you can add your own
const CustomHeader = styled.div`
h1 {
font-family: Poppins;
font-size: 14px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: 0.02px;
text-align: left;
color: #0f173a;
}
`;
Then wrap your return inside the CustomHeader wrapper.
const Header = ({ title }) => {
return (
<CustomHeader>
<h1>{title}</h1>
<button>
{EXIT}
</button>
</CustomHeader>
);
};
You can add any tag inside CustomHeader that you want to customize.
You're almost there.
Its not working because you are setting className directly on div element of your Header component.
According to the styled-component documentation:
The styled method works perfectly on all of your own or any third-party components, as long as they attach the passed className prop to a DOM element.
https://styled-components.com/docs/basics#styling-any-component
So, in your case you need to:
const Header = ({ title, className }) => {
return (
<div className={className}>
<h1>{title}</h1>
<button>EXIT</button>
</div>
);
};
const CustomHeader = window.styled(Header)`
h1 {
max-width: 500px;
}
button {
padding-left: 100px;
}
`;
const App = () => {
return (
<React.Fragment>
<Header className='' title={"title"} />
<CustomHeader title={"title"} />
</React.Fragment>
);
};
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
<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>
<script src="//unpkg.com/styled-components#4.0.1/dist/styled-components.min.js"></script>
<div id="root"></div>
So, i set Header like this:
const Header = ({ title, className }) => {
return (
<div className={className}>
And where i did <Header className='' title={"title"} /> you can do like this:
<Header className={styles.Header} title={"title"} />
// Code
const Header = ({ title }) => {
return (
<Header>
<h1>{title}</h1>
<button>
{EXIT}
</button>
</Header>
);
};
// Styles
const Header = styled.div`
h1{
styles...
}
button{
styles...
}
`;
I am trying to scroll down user at bottom when user click on button . I really tried hard but didn't find any solution . Could someone please help me how to achieve my goal .
Thanks
You can use document.body.offsetHeight to get the height of the page and scroll to it using windows.scroll. If you need to support IE11 and lower use window.scroll(0, document.body.offsetHeight);
import React from 'react';
function App() {
function handleScroll() {
window.scroll({
top: document.body.offsetHeight,
left: 0,
behavior: 'smooth',
});
}
return <button type="button" onClick={handleScroll}>Scroll</button>;
}
There are few ways to achieve this:
const onClick = () => {
window.scroll({
bottom: document.body.scrollHeight, // or document.scrollingElement || document.body
left: 0,
behavior: 'smooth'
});
}
...
return <button onClick={onClick} ... />
and another way with a ref. You need to add an element to the bottom of the page
and scroll to it after button clicked:
const bottomRef = React.useRef();
const onClick = () => {
bottomRef.current.scrollIntoView();
}
...
return (
<div className="container">
<button onClick={onClick} />
<div className="bottomContainerElement" ref={bottomRef} />
<div>
)
You install react-scroll-button npm package
npm i react-scroll-button
Usage code
import React, {Component} from 'react'
import ScrollButton from 'react-scroll-button'
class ScrollComponent extends Component {
render() {
return (
<ScrollButton
behavior={'smooth'}
buttonBackgroundColor={'red'}
iconType={'arrow-up'}
style= {{fontSize: '24px'}}
/>
);
}
}
You can use useRef hook to scrool to particular div.
This is the most recommended method by react and using react hooks.
App.js
import React, { useRef } from "react";
import "./styles.css";
export default function App() {
const divRef = useRef();
return (
<div className="App">
<button
onClick={() => {
divRef.current.scrollIntoView({ behavior: "smooth" });
}}
>
Scroll to Bottom
</button>
<div className="bigDiv" />
<div className="bigDiv" />
<div className="bigDiv" />
<div className="bigDiv" ref={divRef}>
Scrolled Here
</div>
</div>
);
}
Styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.bigDiv {
height: 100vh;
width: 100%;
background: cyan;
border: 1px solid violet;
}
Actually, I use isAvatarUserMenuOpen prop into the UserDataPresentation class, to know if the modal is opened or not. I use this state to generate a condition that affect the onClick to open and close the modal. But i need to close this modal with any click made outside this modal, actually it only closes in the same button that open it.
I have been doing a handleClick, that add a listener when the modal is opened, and when i click outside the modal, it shows an alert "close de modal!". I need to remove this alert, and find a way to close the modal, just as the onclick that open and close the modal do.
export class UserDataPresentation extends React.Component<Props> {
node: any
componentWillMount() {
document.addEventListener('mousedown', this.handleClick, false)
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClick, false)
}
handleClick = (e: { target: any }) => {
if (!this.node.contains(e.target)) {
alert('close de modal!')
return
}
}
render() {
const { openMenuUserModal, closeMenuUserModal, isAvatarUserMenuOpen } = this.props
return (
<React.Fragment>
<div className="user-data-container" ref={isAvatarUserMenuOpen ? (node) => (this.node = node) : null}>
<div className="text">
<p>Wolfgang Amadeus</p>
</div>
<div className="avatar">
<img src={avatarPhoto} />
</div>
<a href="#" onClick={isAvatarUserMenuOpen ? closeMenuUserModal : openMenuUserModal}>
<div className="svg2">
<SVG src={downArrow} cacheGetRequests={true} />
</div>
</a>
</div>
</React.Fragment>
)
}
}
I come across this problem quite often and always do the following.
I mix css positioning and react hooks to create a modal. the overlayer div covers the whole div container so when you click any where in the container apart from the modal, the modal dissapears. z-index:1 on #modal makes sure the modal is stacked above the overlayer.
const Modal = () => {
const [modal, setModal] = React.useState(false);
return (
<div id='container'>
<button onClick={() => setModal(true)}>toggle modal</button>
{modal && <div id='overlayer' onClick={() => setModal(false)}></div>}
{modal && <div id='modal'>modal</div>}
</div>
);
};
ReactDOM.render(<Modal/>, document.getElementById("react"));
#container{
position: relative;
height: 200px; width:200px;
border: 1px solid black;
}
#container * {position: absolute;}
#overlayer{
height: 100%; width:100%;
}
#modal{
background: blue;
height: 30%; width:30%;
top: 12%; z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
You should be able to call this.props.closeMenuUserModal() in your handleClick function.