Basically I have created a button component that looks something like this:
import React from "react";
import styles from "./button.module.scss";
const Button = ({ icon, text, align, bgcolor }) => {
const btnStyle = {
justifySelf: align,
};
return (
<>
<div className={"btn " + bgcolor} style={btnStyle}>
<i className={icon}></i> {text}
</div>
</>
);
};
export default Button;
In my app I can then call it by:
<Button
icon="fa-light fa-trash"
text="Some text"
align="end"
bgcolor="yellow"
></Button>
However, at the same time I wish to have an onclick event similar to:
<div onClick={() => setState(!state)}>Click me</div>
How can that be achieved?
Write a function that you can pass as props to the Button component:
const function=()=>{
setState(!state)
}
<Button
icon="fa-light fa-trash"
text="Some text"
align="end"
bgcolor="yellow"
function={function}
></Button>
And use it inside like this:
const Button = ({ icon, text, align, bgcolor, function }) => {
const btnStyle = {
justifySelf: align,
};
return (
<>
<div onClick={function} className={"btn " + bgcolor} style={btnStyle}>
<i className={icon}></i> {text}
</div>
</>
);
};
Related
on my Project I have a banner on top of my site with 2 buttons. when I click the button profile I want it to change the css style of a div in another component.
this is my code for the banner:
import Profile from "./Profile";
function Banner() {
const invis=false;
return (
<div className="banner">
<span className="bannerbtnsettings">
<button className="btnbannersettings">Settings</button>
</span>
<span className="bannerbtnprofile">
<button className="btnbannerprofile" onClick={Profile.changeStyle}>Profile</button>
</span>
</div>
);
}
export default Banner;
this is my code for the div in the other component:
import "../index.css";
import React, { useState } from "react";
const Profile = () => {
const [style, setStyle] = useState("profile-hidden");
const changeStyle = () => {
console.log("you just clicked");
setStyle("profile-displayed");
};
return (
<div>
<div className={style}> hellllo</div>
</div>
);
};
export default Profile;
I can only find information about this with parent-child components.
They said I should use a usestate import but I can't seem to get it working. what's the proper way to do this?
All you need is lift your state to parent component, if you have a long trip to your common ancestor you can try to use a context. Attached a working example. Hope it helps!
const Banner = ({ onClickHandler }) => {
return (
<div className="banner">
<span className="bannerbtnsettings">
<button className="btnbannersettings">Settings</button>
</span>
<span className="bannerbtnprofile">
<button className="btnbannerprofile" onClick={() => onClickHandler()}>Profile</button>
</span>
</div>
)}
const Profile = ({ style }) => {
return (
<div>
<div className={style}>I'm your profile :)</div>
</div>
);
};
const App = () => {
// We lift the state
const [style, setStyle] = React.useState("profile-hidden");
const profileHandler = () => {
setStyle(style === 'profile-hidden'
? 'profile-displayed'
: 'profile-hidden')
}
return(
<div>
<Banner onClickHandler={profileHandler} />
<Profile style={style} />
</div>
)
}
// Render
ReactDOM.createRoot(
document.getElementById("root")
).render(
<App />
);
.profile-hidden {
display: none;
}
.profile-displayed {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<div id="root"></div>
You cannot use this syntax for React Components COMPONENT.method
, in your case onClick={Profile.changeStyle} !
Instead you should make Banner parent component and use Profile component as child inside it or vise versa !
then You should pass the state style as props so then you will be able to use its value.
your code should look like this :
function Banner() {
const [style, setStyle] = useState("profile-hidden");
const changeStyle = () => {
console.log("you just clicked");
setStyle("profile-displayed");
};
return (
<div className="banner">
<span className="bannerbtnsettings">
<button className="btnbannersettings">Settings</button>
</span>
<span className="bannerbtnprofile">
<button className="btnbannerprofile" onClick={changeStyle}>Profile</button>
</span>
<Profile style={style} />
</div>
);
}
export default Banner;
and your Profile component :
const Profile = (props) => {
return (
<div>
<div className={props.style}> hellllo</div>
</div>
)
}
i'm trying to make a button that use the same style but want to use it for two button (1) go to some page (2) to pop up a video trailer. but both of them do the action (1). I don't know how to make these two button do different job.
here is the code for Button,
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];
const SIZES = ['btn--medium', 'btn--large'];
export const Button = ({
children,
type,
onClick,
buttonStyle,
buttonSize
}) => {
const checkButtonStyle = STYLES.includes(buttonStyle)
? buttonStyle
: STYLES[0];
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
return (
<Link to={Button.props.action} className='btn-mobile'>
<button
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onClick}
type={type}
>
{children}
</button>
</Link>
);
};
here is the code for two buttons
function HeroSection() {
return (
<div className='hero-container'>
<video src='/videos/animated-banner.mp4' autoPlay loop muted playsInline/>
<h1>TITLE</h1>
<p> simple text.</p>
<div className='hero-btns'>
<Button
className='btns'
buttonStyle='btn--outline'
buttonSize='btn--large'
>
GET STARTED
</Button>
<Button
className='btns'
buttonStyle='btn--primary'
buttonSize='btn--large'
onClick={console.log('hey')}
>
WATCH TRAILER <i className='far fa-play-circle' />
</Button>
</div>
</div>
);
}
export default HeroSection;
you can use onClick event for different jobs.
<Button
className='btns'
buttonStyle='btn--outline'
buttonSize='btn--large'
onClick={() => {
// ...go to some page...
}}
>
GET STARTED
</Button>
<Button
className='btns'
buttonStyle='btn--primary'
buttonSize='btn--large'
onClick={() => {
// ...open pop up...
}}
>
WATCH TRAILER <i className='far fa-play-circle' />
</Button>
IMO, I think you could add new props to and conditionally use tag either Link or button by checking that props. If you pass value to props to then will be rendered as Link, else as button
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];
const SIZES = ['btn--medium', 'btn--large']
export const Button = ({
children,
type,
onClick,
buttonStyle,
buttonSize,
to
}) => {
const checkButtonStyle = STYLES.includes(buttonStyle)
? buttonStyle
: STYLES[0];
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
const ActionTag = to ? Link : 'button';
return (
<ActionTag
className={`btn ${checkButtonStyle} ${checkButtonSize}`}
onClick={onClick}
type={type}
to={to}
>
{children}
</ActionTag>
);
};
and you could use that component like this.
If it's used to navigate to other page, pass value to props to
For popping up a video trailer pass props onClick
<Button
className='btns'
buttonStyle='btn--outline'
buttonSize='btn--large'
onClick={
// do something
}
>
pop up
</Button>
<Button
className='btns'
buttonStyle='btn--primary'
buttonSize='btn--large'
to="/"
>
go to home
</Button>
I have a homepage where they can click the modal button. after the button click the modal will show. then in the modal they will input a text and when they click submit the text they input should be display in the homepage. Currently the one i did is not displaying in homepage when click the submit button. Please help. Thank you
This is the code:
https://codesandbox.io/s/competent-rgb-lk4ws
Modal
In your Modal component you can create a event when the Submit button is clicked:
import React from "react";
import "./modal.css";
// Create new event: onSubmitClick
function Modal({ setOpenModal, onSubmitClick }) {
// It`s function get name value and pass to onSubmitClick
function getData() {
const nameValue = document.getElementById("name").value;
onSubmitClick(nameValue);
setOpenModal(false);
}
return (
<div className="modalBackground">
<div className="modalContainer">
<div className="titleCloseBtn">
<button
onClick={() => {
setOpenModal(false);
}}
>
X
</button>
</div>
<div className="title">Forms</div>
<div className="body">
<input id="name" placeholder="Enter Your Name" />
</div>
<div className="footer">
<button
onClick={() => {
setOpenModal(false);
}}
id="cancelBtn"
>
Cancel
</button>
{/* The onclick should be onClick */}
<button onClick={getData}>Submit</button>
</div>
</div>
</div>
);
}
export default Modal;
Home
In home page you can get the event and use the new name value
import React, { useState } from "react";
import Modal from "../../src/components/Modal/modal.js";
const Home = () => {
const [modalOpen, setModalOpen] = useState(false);
const [name, setName] = useState("");
function handleModalSubmitClick(nameValue) {
// Receive new value, and set in a state
setName(nameValue);
}
return (
<div class="hello">
<h1>Hey, click on the button to open the modal.</h1>
<span>name: {name}</span>
<button
onClick={() => {
setModalOpen(true);
}}
class="button is-pulled-right"
>
Button
</button>
{modalOpen && (
<Modal
setOpenModal={setModalOpen}
onSubmitClick={handleModalSubmitClick} // Bind a function to handle a event
/>
)}
</div>
);
};
export default Home;
I am trying to disable the background body scroll when a modal pop up window is open. I created the Modal using React portal. The only way I can think of doing this is by giving the body an overflow-y property when the Modal is open, but am unsure how to execute this..
my Modal.js looks like this
export default function Modal({open, onClose, image, title, description}){
if (!open) return null
return ReactDom.createPortal(
<>
<div id="overlay" />
<div id="modal" >
<button title={title} onClick={onClose}>close</button>
<h3>{title}</h3>
<img src={image} className="modal-img"/>
{description}
</div>
</>,
document.getElementById('portal')
)
}
and the component where I am 'rendering' the model
const ProjectCardUI = (props)=>{
const[isOpen, setIsOpen] = useState(false)
function openModal() {
setIsOpen(true)
// can I set the styling for '.body' or 'html' here?
}
return(
<div className="card text-center container-fluid d-flex">
<a className="modal-click" onClick ={openModal}>this is a link</a>
<Modal
open={isOpen}
onClose={() => setIsOpen(false)}
title={props.cardName}
image={props.imgsrc}
description={props.cardDescription}>
</Modal>
</div>
)
};
any help would be great.
You can directly manipulate the body style via the document object.
For example:
import React from "react";
import ReactDOM from "react-dom";
export default function Test() {
const setHidden = () => {
console.log(document.body.style.overflow);
if (document.body.style.overflow !== "hidden") {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "scroll";
}
};
return (
<div>
<button onClick={setHidden}>Click me! </button>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
</div>
);
}
ReactDOM.render(<Test />, document.getElementById("container"));
Maybe something like this:
const ProjectCardUI = (props) => {
const [isOpen, setIsOpen] = useState(false);
function openModal() {
setIsOpen(true);
// can I set the styling for '.body' or 'html' here?
}
useEffect(() => {
const body = document.querySelector('body');
body.style.overflow = isOpen ? 'hidden' : 'auto';
}, [isOpen])
return (
<div className="card text-center container-fluid d-flex">
<a className="modal-click" onClick={openModal}>
this is a link
</a>
<Modal
open={isOpen}
onClose={() => setIsOpen(false)}
title={props.cardName}
image={props.imgsrc}
description={props.cardDescription}
></Modal>
</div>
);
};
Trying to achieve something similar to popular T&C's actions, when you scroll down to the very bottom of the div 'accept' button becomes enabled so you can click on it.
For this example, I am using material-UI components & button becomes disabled when I add 'disabled' within the component, that's all.
Here's the code:
import React from 'react';
import PropTypes from 'prop-types';
import Modal from '#material-ui/core/Modal';
import Button from '#material-ui/core/Button';
import './terms-popup.scss';
const handleScroll = (e) => {
const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
if (bottom) { console.log('bottom is reached'); }
};
const TermsPopup= ({
isModalOpen,
isOpen,
title,
closeLabel,
showCloseButton,
}) => {
return (
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={isOpen}
onClose={() => isModalOpen(false)}
>
<div className="terms-container">
<div className="terms-header">
<h2>{title}</h2>
</div>
<div
className="terms-body"
onScroll={handleScroll}
>
<h3>Sample title</h3>
<p>Sample description would go here</p>
<div className="terms-footer">
{(showCloseButton) ? (
<Button
variant="contained"
type="button"
onClick={() => isModalOpen(false)}
>
{closeLabel}
</Button>
) : null}
</div>
</div>
</Modal>
);
};
TermsPopup.propTypes = {
isModalOpen: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
title: PropTypes.string.isRequired,
closeLabel: PropTypes.string,
showCloseButton: PropTypes.bool,
};
TermsPopup.defaultProps = {
closeLabel: 'accept',
showCloseButton: true,
};
export default TermsPopup;
And what I'd like to achieve is when the bottom is reached then Button should change to:
<Button
variant="contained"
type="button"
onClick={() => isModalOpen(false)}
disabled
/>
Move your onScroll event handler into the component itself, and use React state to update your component when the bottom is reached. You can use the state variable to then set the 'disabled' prop on your Button component.
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Modal from '#material-ui/core/Modal';
import Button from '#material-ui/core/Button';
import './terms-popup.scss';
const TermsPopup= ({
isModalOpen,
isOpen,
title,
closeLabel,
showCloseButton,
}) => {
const [bottom, setBottom] = useState(false);
const handleScroll = (e) => {
const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
setBottom(bottom)
};
return (
<Modal
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
open={isOpen}
onClose={() => isModalOpen(false)}
>
<div className="terms-container">
<div className="terms-header">
<h2>{title}</h2>
</div>
<div
className="terms-body"
onScroll={handleScroll}
>
<h3>Sample title</h3>
<p>Sample description would go here</p>
<div className="terms-footer">
{(showCloseButton) ? (
<Button
variant="contained"
type="button"
onClick={() => isModalOpen(false)}
disabled={bottom}
>
{closeLabel}
</Button>
) : null}
</div>
</div>
</Modal>
);
};