I'm trying to assign values entered in a modal to state variables on the main page. To do this I understand that I have to bind a function to the props from the parent element. The issue is when I'm doing this, out of the three functions that I'm trying to bind only two are showing up in the modal function.
Main.js
import './Modal';
export class Main extends Component{
constructor(props){
super(props);
this.state = { foo : false};
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.uploadFile = this.uploadFile.bind(this);
}
handleShow(){
this.setState({ foo : true});
}
handleClose(){
console.log("Close something");
}
uploadFile(){
console.log("File uploaded");
}
render(){
return(
<div>
<Button id="button" onClick = {(e) =>
this.handleShow()}> Upload
</Button>
<Uploadmodal
stateProps={this.state}
handleClose={this.handleClose}
handleShow={this.handleShow}
/>
</div>
}
Modal.js
function UploadModal(props){
<Modal show={props.stateProps.foo} onHide={props.handleClose} style={{opacity:1}} >
<Modal.Header closeButton>
<Modal.Title>Upload File</Modal.Title>
</Modal.Header>
<Modal.Footer>
<Button variant="secondary" onClick={props.handleClose}>
Cancel
</Button>
<Button variant="primary" onClick={props.uploadFile}>
Ok
</Button>
</Modal.Footer>
</Modal>
}
When being called from inside the Modal function, the handleClose() and handleShow() functions work just fine. But on calling the uploadFile() function I get an error saying props.uploadFile is not a function. On checking the props in the modal function, handleshow and handleClose show up but there is no key/value pair for uploadFile.
The Modal works perfectly fine on a different page and that page passes all the functions that have been binded. So I'm completely sure the modal code is working fine. Also note that any other function passed except handleShow() and handleClose() is not showing up.
Any suggestions would be appreciated. Thanks in advance!!
So I found the mistake in my code. The modal.js should pass the uploadFile function as a parameter while calling the uploadModal. I added the uploadFile function but never updated the call to the UploadModal function. The code should be :
Main.js
import './Modal';
export class Main extends Component{
constructor(props){
super(props);
this.state = { foo : false};
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.uploadFile = this.uploadFile.bind(this);
}
handleShow(){
this.setState({ foo : true});
}
handleClose(){
console.log("Close something");
}
uploadFile(){
console.log("File uploaded");
}
render(){
return(
<div>
<Button id="button" onClick = {(e) =>
this.handleShow()}> Upload
</Button>
<Uploadmodal
stateProps={this.state}
handleClose={this.handleClose}
handleShow={this.handleShow}
uploadFile={this.uploadFile}
/>
</div>
}