We Keep Coding

React JS: Calling two functions in an onClick event does not run functions

I'm using React and React Spring. React spring has a toggle function that essentially maximizes a window on click. It looks like this:
class Projects extends Component {
constructor() {
super()
this.state = {
instructions: true,
data: ''
}
}
handleClick () {
console.log('hello world');
this.setState({
instructions: false
});
console.log(this.state.instructions);
return true;
}
render() {
return (
{this.state.instructions && (
<div className="projects-instructions">
Instructions here
</div>
)}
<Grid
className="projects"
data={data}
keys={d => d.name}
heights={d => d.height}
columns={2}>
{(data, maximized, toggle) => (
<div onClick={()=>{
return data.clicks ? toggle() : false
}}>
</div>
)}
</Grid>
);
}
}
export default Projects;
What I want to do, is hide the instructions on click. I can make this happen by calling handleClick via, this.handleClick.bind(this) in my onClick tag via: onClick={this.handleClick.bind(this)}. But that means I have to remove the toggle onClick function. So I found that I could call two functions like so:
onClick={()=>{
this.handleClick.bind(this);
return data.clicks ? toggle() : false;
}}
The issue is that this.handleClick.bind(this) never runs. console.log doesn't even run.
How should I be doing this?

Binding this to a function does not call the function. It simply specifies what this refers to when used within that function. Bind to this in the constructor, and then, in your onClick event, simply call the function normally (i.e. this.handleClick()).
class Projects extends Component {
constructor() {
super();
this.state = {
instructions: true,
data: ''
}
//this is where you bind `this` to methods
this.handleClick = this.handleClick.bind(this);
}
handleClick () {
console.log('hello world');
this.setState({
instructions: false
});
console.log(this.state.instructions);
return true;
}
render() {
return (
{this.state.instructions && (
<div className="projects-instructions">
Instructions here
</div>
)}
<Grid
className="projects"
data={data}
keys={d => d.name}
heights={d => d.height}
columns={2}>
{(data, maximized, toggle) => (
<div onClick={()=>{
this.handleClick();
return data.clicks ? toggle() : false
}}>
</div>
)}
</Grid>
);
}
}
export default Projects;

Common Delete Modal Component in react with Reactstrap

I am trying to create a common Delete Component and call from other components with reactstrap.
Here is my DeleteModal
class DeleteModal extends Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState(prevState => ({
modal: !prevState.modal
}));
}
render() {
return (
<div>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Delete the item</ModalHeader>
<ModalBody>
Do you want to delete the item ?
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>yes</Button>
<Button color="secondary" onClick={this.toggle}>No</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default DeleteModal;
When the user click the YES button I need to return the ID of the item. So that I can know that delete confirm has been click.
Here is the other component from where I want to call the Modal
class Home extends Component {
handleDeleteClick(id) {
console.log(id);
}
}
handleDeleteClick is the method to call the modal also I need to pass the ID to the deleteModal component and when the user click on the YES button I need to get back the id from the DeleteModal.
How can I achieve this? I tried to research on this but not able to identify the solution.

I changed a bit the way you were doing, instead of sending the id to modal, you just save the deleteID on the state. It makes the DeleteModal more specific, it does not have to know any ID, it just let you know if you have to delete or not and the container component will manage that.
class DeleteModal extends Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
this.deleteItem = this.deleteItem.bind(this);
this.close = this.close.bind(this);
}
toggle() {
this.setState(prevState => ({
modal: !prevState.modal
}));
}
deleteItem(){
this.toggle()
this.props.clickHandler()
}
close(){
this.toggle()
this.props.onClose()
}
render() {
return (
<div>
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalHeader toggle={this.toggle}>Delete the item</ModalHeader>
<ModalBody>
Do you want to delete the item ?
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.deleteItem}>yes</Button>
<Button color="secondary" onClick={this.close}>No</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default DeleteModal;
import DeleteModal from './DeleteModal'
class Home extends Component {
constructor(props) {
super(props);
this.state = {
deleteID: null
};
this.handleDeleteClick = this.handleDeleteClick.bind(this);
this.onCloseModal = this.onCloseModal.bind(this);
this.openModal = this.openModal.bind(this);
}
handleDeleteClick() {
//delete object
this.onCloseModal()
}
onCloseModal(){
this.setState({deleteID: null})
}
openModal(deleteID){
this.setState({deleteID})
}
return(<div><button onClick={()=> this.openModal(id)}>Delete</button>
{deleteID && <DeleteModal clickHandler={this.handleDeleteClick} onClose={this.onCloseModal}/>}
</div>)
}

how close parent modal when open child modal in Reactjs?

I can not close current modal when open new modal in React js. please help me.
I have parent modal: Register_modal and child of it: RegisterCode_Modal
parent modal is called in header component:
first: Header component
this component call first modal and pass open and close props to it:
import React , {Component} from 'react';
import ReactDOM from 'react-dom';
import {NavLink} from 'react-router-dom';
import Register_Modal from './Register_Modal';
export default class Header extends Component {
constructor() {
super();
this.state = {
modalIsOpen: false
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
openModal(e) {
e.preventDefault();
this.setState({modalIsOpen: true});
}
closeModal(e) {
e.preventDefault();
this.setState({modalIsOpen: false});
}
render() {
return (
<div>
<div className="button navbar-right">
<button className="navbar-btn nav-button wow bounceInRight login" data-wow-delay="0.45s">ورود</button>
<button className="navbar-btn nav-button wow fadeInRight" data-wow-delay="0.48s" onClick={this.openModal} >ثبت نام</button>
<div >
<Register_Modal open={this.state.modalIsOpen} close={this.closeModal} />
</div>
</div>
);
}
}
---------------------------------------------------------------------------
second: parent component
export default class Register_Modal extends Component {
constructor(props){
super(props);
this.state={
codemodal: false
};
this.openCodeModal=this.openCodeModal.bind(this);
this.closeCodeModal=this.closeCodeModal.bind(this);
}
openCodeModal(e){
e.preventDefault();
this.setState({codemodal: true});
}
closeCodeModal(e){
e.preventDefault();
this.setState({codemodal: false});
}
render() {
return (
<div>
<Modal
isOpen={this.props.open}
onRequestClose={this.props.close}
ariaHideApp={false}
contentLabel="selected option"
isClose={this.props.close}
style={customStyles}
>
<h2>salammmmm</h2>
<button onClick={this.props.close} >انصراف</button>
<button onClick={this.openCodeModal} >بعدی</button>
</Modal>
<div className="ReactModalPortal">
<RegisterCode_Modal open={this.state.codemodal} close={this.closeCodeModal} />
</div>
{this.props.close}
</div>
);}
}
------------------------------------------------------------------
third: child component
export default class RegisterCode_Modal extends Component {
constructor(props){
super(props);
console.log("injaaaaa");
}
render() {
return (
<div>
<Modal
isOpen={this.props.open}
onRequestClose={this.props.close}
ariaHideApp={false}
contentLabel="ورود کد"
isClose={this.props.close}
style={customStyles}
>
<h2>مرحله کد</h2>
<button onClick={this.props.close} >تائید</button>
</Modal>
</div>
);}
}

You can simply achieve this by rendering them conditionally.
I personally so this:
export default class RegisterModal extends Component {
state = {
showBaseModal: true,
codemodal: false,
};
openCodeModal = () => {
this.setState({
codemodal: true,
showBaseModal: false,
});
};
closeCodeModal = () => {
this.setState({ codemodal: false });
};
render() {
return (
<div>
{this.state.showBaseModal && (
<Modal
isOpen
onRequestClose={this.props.close}
ariaHideApp={false}
isClose={this.props.close}
>
<button onClick={this.props.close}>Close</button>
<button onClick={this.openCodeModal}>Next</button>
</Modal>
)}
{this.state.codemodal && (
<RegisterCode_Modal
open={this.state.codemodal}
close={this.closeCodeModal}
/>
)}
</div>
);
}
}
Adding an extra state for base modal. On openCodeModal event, toggle it to false to stop both modals.
Set isOpen always to true for both modals, and then render RegisterModal component conditionally.

Reactstrap: Getting Modal to work

Trying to learn React and Reactstrap and trying to get Modals to work. When I click the button, it should toggle the Modal, but right now it's giving me this error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'App'
Can't figure out what I'm doing wrong. Can someone help let me know where I'm going wrong here? Appreciate any help you can give.
I'd like to use the most recent versions of React and Reactstrap if possible.
Here's a link on Codepen: https://codepen.io/lieberscott/pen/ddYNVP
const { Button,
Container,
Modal,
ModalTitle,
ModalHeader,
ModalBody,
ModalFooter } = Reactstrap;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showModal: false
}
this.toggleModal = this.toggleModal.bind(this);
}
toggleModal() {
console.log("hello");
this.setState({
showModal: !this.state.showModal
})
}
render() {
return (
<Container>
<Headline />
<Box />
<Button outline color="primary" onClick={this.toggleModal}>Click</Button>
<Modal isOpen={this.state.showModal} toggle={this.toggleModal} className="modal">
<ModalHeader>
<ModalTitle id="modalTitle">
Add a Recipe
</ModalTitle>
</ModalHeader>
<ModalBody>
Modal body
</ModalBody>
<ModalFooter>
Modal footer
</ModalFooter>
</Modal>
</Container>
);
}
}
class Headline extends React.Component {
render() {
return (
<div>
Recipes
</div>
);
}
}
class Box extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{
name: "Tofu tacos",
ingredients: [
"Shells",
"lettuce",
"tofu",
"paprika"
]
},
{
name: "Spaghetti",
ingredients: [
"pasta",
"sauce",
"salt"
]
}
] // end of items
} // end of this.state
} // end of constructor
render() {
const allitems = this.state.items.map(item => {
return (
<div>
{item.name}
</div>
);
})
return (
<div>
{allitems}
</div>
);
}
}
const app = document.getElementById("app");
ReactDOM.render(<App />, app);

I don't know how to share my code via codepen like you did, sorry.
I did these changes:
toggleModal() {
console.log("hello");
console.log( 'before setState: ', this.state );
this.setState({
showModal: !this.state.showModal
})
console.log( 'after setState: ', this.state );
}
The Button onClick event, when you do onClik={this.something} this this refers to the Button element. I changed to:
<Button outline color="primary" onClick={() => this.toggleModal()}>Click</Button>
When I do onClick={ () => this.something() } allows me to make use of the methods of my class.
Just look at the console.log output and you'll see clicking on button change showModal to true or false.
Take a look on cephalization's answer: https://forum.freecodecamp.org/t/difference-in-reactjs-onclick-function-binding/116027/2

It is far easier this way
add your state in the constructor example
this.state={showLogOut: false}
in your return all you need is to setState true example
<Button onClick={() => this.setState({showLogOut: true})}>Show modal</Button>
now all we need is the modal code since we have an state and a setState
<Modal isOpen={this.state.showLogOut} fade="false" toggle={() => this.setState({showLogOut: false})}>
<ModalHeader toggle={() => this.setState({showLogOut: false})}>Ready to leave?</ModalHeader>
<ModalBody>
<p>Press logout to end session.</p>
</ModalBody>
<ModalFooter>
<Button onClick={() => this.setState({showLogOut: false})}>Cancel</Button>
<Button color="info">Logout</Button>
</ModalFooter>
this should be enough to show your modal: I am assuming you are using react-strap and that you are importing the required elements but just to make sure here is what you need to import
import { Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';

Reactstrap Modal don't show, because is need fade set on False. plz look my code who worked.
class Demoextends extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false,
fade: false
};
this.toggle = this.toggle.bind(this);
};
toggle() {
console.log("hello");
this.setState({
modal: !this.state.modal
});
console.log( 'after setState: ', this.state );
}
render() {
return (
<div>
<Button color="danger" onClick={this.toggle}>Launch</Button>
<Modal isOpen={this.state.modal} fade={this.state.fade } toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
</ModalBody>
<ModalFooter>
<Button onClick={this.toggle}>Do Something</Button>{' '}
<Button onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default Demoextends;
Of course You must add and part of reactstrap in your code

Reactstrap dropdownitem not triggering setState

What is happening?
Hello, I'm just using reactstrap and react js for a bit and i have some issues regarding the component. I want to trigger show modal when i click on the component inside the component. this is the module that i've been working for a while:
What should be happening?
I expect it to trigger setState when i click the div inside DropdownItem
// Base Account placeholder component <PARENT>
export class Account extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropDownOpen : false
};
}
toggle() {
this.setState({
dropDownOpen : !this.state.dropDownOpen
});
}
render() {
return (
<Dropdown isOpen={this.state.dropDownOpen} toggle={this.toggle}>
<DropdownToggle nav caret>
Account
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
<div onClick={() => console.log("fire pew pew")}>
<AccountSettingModal />
</div>
</DropdownItem>
<DropdownItem>
Pricings
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Logout
</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}
}
this is the modal that i want to show:
// Base account placeholder for Modal Setting
class AccountSettingModal extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
// console.log("modalSetting: " + this.state.modalSetting);
}
render() {
return (
****************! trigger this when i click the dropdownitem !*********************
<div onClick={this.toggle}>
<a>Setting</a>
<Modal isOpen={this.state.modal} toggle={this.toggle} className="account-setting-box">
<ModalHeader toggle={this.toggle}>Setting</ModalHeader>
<ModalBody className="scroll">
</ModalBody>
<ModalFooter className="modal-footer">
</ModalFooter>
</Modal>
</div>
);
}
}
help much appreciated because i've been dealing with this issues for about two days. I can use custommenu for solving this problem, but in the name of my learning process, I'm convinced that i need to ask about this issue that i got.
Thank you very much! 👍

Change the name of the toggle function in the modal as you are using same name function toggle() in parent and child component. Rename toggle() in parent or child component and it will be good to go.
// Account
toggleDropdown() {
this.setState({
dropDownOpen : !this.state.dropDownOpen
});
}
and/or also change:
// AccountSettingModal
toggleState() {
this.setState({
modal: !this.state.modal
});
}