I'm trying to submit a Form from Child Component through a button placed in Parent. The Parent is a Slide which has a Next Button and I display my Child Component in one page of a Slide.
What I want to do is: When I press next button from Parent I have to go to the next slide and also to submit the Form Child.
code:
Parent Component:
import Slider from "react-slick";
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {
errors: {}
}
next() {
this.slider.slickNext();
}
previous() {
this.slider.slickPrev();
}
render() {
const settings = {
dots: true,
infinite: false
};
return (
<div>
<Slider ref={c => (this.slider = c)} {...settings}>
<div style={{ textAlign: "center" }} key={1} >
<Child /> //this is the Child I want to submit once I press Next Button
<Button id="btn" className="btn btn-primary float-right " type="submit" onClick={this.next}> Next</Button> //this is the next button which sould trigger the submit from Child
</div>
<div key={2} >
<Page2/>
<Button className="btn btn-primary float-right " id="btn" onClick={() => this.finish()>Finish</Button>
<Button id="btn" className="btn btn-primary float-right " onClick={this.previous}> Previous</Button>
</div>
</Slider>
</div>
);
}
}
Child Component:
class Child extends React.Component {
constructor(props) {
super(props)
this.state = {
info: '',
infoID: 0,
valid:false,
errors: {}
}
this.handleValidSubmit = this.handleValidSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
handleValidSubmit() {
if(valid){
localStorage.setItem("infoID",this.state.infoID);
this.sendIDToServerAPI(infoID);
}else {
localStorage.setItem("infoID",this.state.infoID);
this.saveNewInfoAPI(info);
}
}
render() {
return (
<div }>
<Container fluid >
<Row >
<Col >
<AvForm id="avForm" onValidSubmit={this.handleValidSubmit} onInvalidSubmit=}>
<Label >Info</Label>
<AvField onChange={this.onChange} name="email" placeholder=""Email/>
........
.......
</AvForm>
</Col>
</Row>
</Container>
</div>
);
}
}
I tried to minimise the components because they are too large, I hope is clear enough what I try to do. Can anyone please help me with a solution/idea? I tried to Google it but couldn't find anything helpful.
Thanks a lot
What you can do is keep a state(a flag) something like submit which will initially be false.
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {
submit: false
....rest of your code
}
// function to update the submit state
const setFormSubmit = () => this.setState({submit: true})
}
Now you call setFormSubmit on next button click
Now you can pass this state(submit) to your child component.
and whenever the submit is true you will trigger the method to submit the form
You can do this by using componentDidUpdate in your child component.
componentDidUpdate(prevProps, prevState) {
// if prev submit and current submit prop is unequal and the submit is true
if ((prevProps.submit !== this.props.submit) && this.props.submit) {
// Call method to submit form
}
}
Related
I am making a dashboard component which displays rendered previews and code for HTML snippets. Inside of the dashboard component I am mapping the array of snippets using .map. Each mapped snippet is going to have a delete function (already built) and an update function.
For the update function to work each snippet has it's own child modal component. I need to pass the ID of the snippet to the modal component where I can combine the ID with the new content before updating the database and state.
However, I'm making a mistake somewhere as I pass the ID as props to the modal.
.map used inside of my Dashboard.js Dashboard class component.
{this.state.snippets.map(snippet => (
<>
<div key={snippet._id} className="holder--pod">
<div className="content">
<div className="content__snippet-preview">
Snippet preview
</div>
<div className="content__body">
<h4>{snippet.name}</h4>
<p>{snippet.details}</p>
<p>{snippet._id}</p> //THIS WORKS
<pre>
<code>{snippet.content}</code>
</pre>
</div>
<div className="content__button">
<button onClick={this.handleDelete(snippet._id)}>
Delete
</button>
<button type="button" onClick={this.showModal}>
Open
</button>
</div>
</div>
</div>
<Modal
sid={snippet._id} //PASS ID HERE
show={this.state.show}
handleClose={this.hideModal}
></Modal>
</>
))}
This renders the snippets below (3 snippet pods, with their database ID included).
The open button opens the modal (Modal.js) below.
import React, { Component } from 'react'
import api from '../api'
export default class Modal extends Component {
constructor(props) {
super(props)
this.state = {
name: '',
details: '',
content: '',
message: null,
}
}
handleInputChange = event => {
this.setState({
[event.target.name]: event.target.value,
})
}
handleClick = id => event => {
event.preventDefault()
console.log(id)
}
render() {
const { sid, show, handleClose } = this.props
console.log(sid)
const showHideClassName = show ? 'modal display-flex' : 'modal display-none'
return (
<div id="Modal" className={showHideClassName}>
<div id="modal-main">
<h4>Edit snippet {sid}</h4>
<form>
Name:{' '}
<input
type="text"
value={this.state.name}
name="name"
onChange={this.handleInputChange}
/>{' '}
<br />
Details:{' '}
<input
type="text"
value={this.state.details}
name="details"
onChange={this.handleInputChange}
/>{' '}
<br />
Content:{' '}
<textarea
value={this.state.content}
name="content"
cols="30"
rows="10"
onChange={this.handleInputChange}
/>{' '}
<br />
<button onClick={this.handleClick(sid)}>TEST ME</button>
</form>
<button onClick={handleClose}>Close</button>
{this.state.message && (
<div className="info">{this.state.message}</div>
)}
</div>
</div>
)
}
}
The console.log just under the render actually pastes the correct 3 ID's the console.
However, calling the ID (sid) within the Modal.js return will only show the last snippet ID, no matter which Modal I open. The same goes for pushing that ID to the handleClick function where I intend to combine the ID with an update package.
Solution below as initiated by HMR in the comments.
The problem was all the modals were showing and just the last one was visible.
Fixed by moving the modal out of the .map and instead updating the ID from within the .map to the state and passing the state ID to a new nested component within the modal.
Also switched to using dynamic CSS to show and hide the modal based on the state.
Dashboard.jsx
export default class Snippets extends Component {
constructor(props) {
super(props)
this.showModal = React.createRef()
this.state = {
snippets: [],
show: false,
sid: '',
}
}
handleDelete = id => event => {
event.preventDefault()
api
.deleteSnippet(id)
.then(result => {
console.log('DATA DELETED')
api.getSnippets().then(result => {
this.setState({ snippets: result })
console.log('CLIENT UPDATED')
})
})
.catch(err => this.setState({ message: err.toString() }))
}
handleModal = id => {
this.setState({ sid: id })
this.showModal.current.showModal()
}
//<div id="preview">{ReactHtmlParser(snippet.content)}</div>
render() {
return (
<>
<Modal ref={this.showModal} handleClose={this.hideModal}>
<ModalUpdate sid={this.state.sid} />
</Modal>
<div className="Dashboard">
<div className="wrapper">
<div className="container">
<div className="holder">
<div className="content">
<div className="content__body">
<h3>Dashboard</h3>
</div>
</div>
</div>
<div className="break"></div>
{this.state.snippets.map(snippet => (
<div key={snippet._id} className="holder--pod">
<div className="content">
<div className="content__snippet-preview">
Snippet preview
</div>
<div className="content__body">
<h4>{snippet.name}</h4>
<p>{snippet.details}</p>
<p>{snippet._id}</p>
<pre>
<code>{snippet.content}</code>
</pre>
</div>
<div className="content__button">
<button onClick={this.handleDelete(snippet._id)}>
Delete
</button>
<button
type="button"
onClick={() => this.handleModal(snippet._id)}
>
Open
</button>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</>
)
}
Modal.jsx
import React, { Component } from 'react'
export default class Modal extends Component {
constructor(props) {
super(props)
this.state = {
show: false,
}
}
showModal = () => {
this.setState({ show: true })
}
hideModal = () => {
this.setState({ show: false })
}
render() {
return (
<div
id="Modal"
style={{ display: this.state.show === true ? 'flex' : 'none' }}
>
<div id="modal-main">
<h4>Edit snippet </h4>
{this.props.children}
<button onClick={() => this.hideModal()}>Close</button>
</div>
</div>
)
}
}
ModalUpdate.jsx
import React, { Component } from 'react'
export default class ModalUpdate extends Component {
constructor(props) {
super(props)
this.state = {
name: '',
details: '',
content: '',
message: null,
}
}
// handleInputChange = event => {
// this.setState({
// [event.target.name]: event.target.value,
// })
// }
// handleClick = id => event => {
// event.preventDefault()
// console.log(id)
// }
render() {
return <h4>ID = {this.props.sid}</h4>
}
}
I am not sure about the handleDelete function,. but replacing the line should solve the issue probably
<button onClick={() => this.handleDelete(snippet._id)}>
One potential issue is the this.handleDelete(snippet._id) will fire immediately rather than onClick, so you will need to add an anonymous function in the event listener:
() => this.handleDelete(snippet._id)
instead of
this.handleDelete(snippet._id)
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
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
});
}
I am having an issue binding the state of a parent component to the state of a child. A look at the code:
Parent Component:
class ParentForm extends React.Component {
constructor(){
super();
this.state = {
showDialog: false
};
}
toggleDialog() {
this.setState({showDialog: !this.state.showDialog});
}
return (
<div >
<Button color='primary' onClick={() => this.toggleDialog()}></Button>
<MyDialog open={this.state.showDialog}/>
</div>
);
}
Child Component:
export default class MyDialog extends Component {
constructor(props){
super(props);
this.state = {
open: this.props.open
};
}
handleRequestClose = () => {
this.setState({ open: false });
};
render() {
return (
<div>
<Dialog
fullScreen
open={this.state.open}
onRequestClose={() => this.handleRequestClose()}
transition={<Slide direction="up" />}
>
<DialogTitle>{'Title'}</DialogTitle>
<DialogContent>
<DialogContentText>
This is my dialog
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => this.handleRequestClose()} color="primary">Close</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
In the Parent Component, if I make the state.showDialog property true, the dialog will open when the page loads. But once I close it one time, I am never able to open it again. If I have it set to false, it doesn't load when the page loads, and I am never able to open the dialog, even when I click the button on the parent component. Thank you in advance for taking your time to help.
Since you are setting the local state based on the parent, you need to make use of componentWillReceiveProps before v16.3.0 or getDerivedStateFromProps/memoization/key modification thereafter, since your state is set only on the first time and never thereafter. However you don't even need a local state in MyDialog component, you can just make use of Props and communicate from child to the parent component.
Parent
class ParentForm extends React.Component {
constructor(){
super();
this.state = {
showDialog: false
};
}
toggleDialog() {
this.setState({showDialog: !this.state.showDialog});
}
closeDialog() {
this.setState({showDialog: false})
}
return (
<div >
<Button color='primary' onClick={ this.toggleDialog}></Button>
<MyDialog open={this.state.showDialog} closeDialog={this.closeDialog}/>
</div>
);
}
MyDialog (child)
export default class MyDialog extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<Dialog fullScreen open={this.props.open} onRequestClose={this.props.closeDialog} transition={<Slide direction="up" />}>
<DialogTitle>{'Title'}</DialogTitle>
<DialogContent>
<DialogContentText>
This is my dialog
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.props.closeDialog} color="primary">Close</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
handleRequestClose method should be like this.
handleRequestClose = () => {
this.setState({ open: this.props.open});
};
Edit 1.
You also need to update the parent state when you close the dialog.
toggleDialog(val) {
if(val){
this.setState({showDialog: val});
}else {
this.setState({showDialog: !this.state.showDialog});
}
}
return (
<div >
<Button color='primary' onClick={() => this.toggleDialog()}></Button>
<MyDialog toggleDialog = {this.toggleDialog} open={this.state.showDialog}/>
</div>
);
And,
componentWillRecieveProps(nextProps) {//Lifecycle method to get the updated props
this.setState({ open: nextProps.open });
}
handleRequestClose = () => {
this.setState({ open: !this.state.open},()=>{
this.props.toggleDialog (this.state.open);
});
};
Your child component currently only receives the parent's showDialog prop value once, only when it's initiated in the constructor.
You need to use componentWillRecieveProps and setState of the child's component with the updated value.
So:
componentWillRecieveProps(nextProps) {
this.setState({ open: nextProps.open });
}
EDIT: Need to use nextProps, not this.props
class ParentForm extends React.Component {
constructor(){
super();
this.state = {
showDialog: false
};
}
toggleDialog() {
this.setState({showDialog: !this.state.showDialog});
}
closeDialog() {
this.setState({showDialog: false});
}
return (
<div >
<Button color='primary' onClick={() => this.toggleDialog()}></Button>
<MyDialog open={this.state.showDialog} closeDialog={() => this.closeDialog()/>
</div>
);
}
export default class MyDialog extends Component {
handleRequestClose = () => {
this.props.closeDialog();
};
render() {
return (
<div>
<Dialog
fullScreen
open={this.state.open}
onRequestClose={() => this.handleRequestClose()}
transition={<Slide direction="up" />}
>
<DialogTitle>{'Title'}</DialogTitle>
<DialogContent>
<DialogContentText>
This is my dialog
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => this.handleRequestClose()} color="primary">Close</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
I'm new to React so bear with me.
I'm trying to create a modal component that will be triggered from a onClick() function from any global element i.e: link, button, span or whatever throughout the whole app.
import React from 'react';
import ReactDOM from 'react-dom';
const display = {
display: 'block'
};
const hide = {
display: 'none'
};
class Modal extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
toggle: false
}
}
toggle(event) {
this.setState(prevState => ({
toggle: !prevState.toggle
}));
}
render() {
return (
<div>
<button onClick={this.toggle}>Show Modal</button>
<div className="modal" style={this.state.toggle ? display : hide} >
<div className="modal-content">
{this.props.children}
<button onClick={this.toggle}>Close</button>
</div>
</div>
</div>
);
}
}
module.exports = Modal;
You can use react-bootstrap-modal:
npm install --save react-bootstrap-modal
Then in your component:
import React from 'react';
import Modal from 'react-bootstrap-modal';
export default class ModalExample extends React.Component {
constructor(props){
super(props);
this.state = {
open: false,
}
}
openModal = () => this.setState({ open: true })
closeModal = () => this.setState({ open: false })
render(){
return (
<div>
<button type='button' onClick={this.openModal}>Launch modal</button>
<Modal
show={this.state.open}
onHide={this.closeModal}
aria-labelledby="ModalHeader"
>
<Modal.Header>
<Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
<div onClick={this.closeModal}>CLOSE HERE</div>
</Modal.Header>
<Modal.Body>
<p>Some Content here</p>
</Modal.Body>
<Modal.Footer>
// If you don't have anything fancy to do you can use
// the convenient `Dismiss` component, it will
// trigger `onHide` when clicked
<Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>
// Or you can create your own dismiss buttons
<button className='btn btn-primary' onClick={this.closeModal}>
CLOSE HERE TOO
</button>
</Modal.Footer>
</Modal>
</div>
)
}
}
For further reference, please go here:
https://github.com/jquense/react-bootstrap-modal
You may also need to include bootstrap-CSS file if necessary! Please post here some errors if any, thanks