Modal values are not retained in react js
I have a modal wherein I've radio buttons and toggle buttons. For toggle buttons what happens is when I toggle the modal it reflects but when I close the modal the states are not preserved i.e., states are not retained, the change is not reflecting except to the default once. I don't know where I'm going wrong.
footer.js
<footer className={"page-footer font-small blue "
+ (this.props.dltheme?
'darkfooter ' : 'lightfooter ')
+ (this.props.tglinsetftrp ?
'ftInsetTransIn ' : (this.props.tgsbclk ?
'ftDefTem ' : 'ftInsetOut '))}>
<div className="text-center">© 2018 Copyright:
</div>
</footer>
home.js
<Footer
dltheme={this.state.tgldlthemep}
tglinsetftrp={this.state.tginsetftrp}
tgsbclk={this.state.tglsidebarp}
/>
filtermodal.js.js I'm using reactstrap modal
<Modal
isOpen={this.state.toggleModal}
toggle={this.togglem.bind(this)}
>
<ModalBody className={this.state.tgthemep ? ' mdlTDCW ':'mdlTLCB '}>
<Radiolayoutbtns permcldfn={this.permprntfn.bind(this)}/>
<div className="row">
<div className="col-6">
<label>Footer</label>
<div className="row">
<Toggleswitch label='Footer' name='Inset'
togFooter={this.tgFooter.bind(this)}/>
</div>
</div>
</div>
</ModalBody>
</Modal>
The other issue with filtermodal.js is for radio buttons my need is to select one default, which works. when I select another radio button, the state too is not preserved when as I close the modal the default radio button is selected due to which the selected radio buttons functionality doesn't work. Where am I going wrong?
RadioButton.js
<Input type="radio" name="radiobtns" value="" defaultChecked/>Default
<Input type="radio" name="radiobtns" value=""
onClick={()=>this.props.permcldfn(true)}/>Permanent
togglem tgFooter both re toggling states
permprntfn is the function which set states
permprntfn(prmchdp){
this.setState({permprntp:prmchdp},()=>this.props.flpermanentFn(this.state.permprntp))
console.log("--41----",this.state.permprntp)
}
can anyone please help me with this
Any help is appreciated
reactjs
asked Nov 15 '18 at 6:39
TestedTested
1741217
add a comment |
I have a modal wherein I've radio buttons and toggle buttons. For toggle buttons what happens is when I toggle the modal it reflects but when I close the modal the states are not preserved i.e., states are not retained, the change is not reflecting except to the default once. I don't know where I'm going wrong.
footer.js
<footer className={"page-footer font-small blue "
+ (this.props.dltheme?
'darkfooter ' : 'lightfooter ')
+ (this.props.tglinsetftrp ?
'ftInsetTransIn ' : (this.props.tgsbclk ?
'ftDefTem ' : 'ftInsetOut '))}>
<div className="text-center">© 2018 Copyright:
</div>
</footer>
home.js
<Footer
dltheme={this.state.tgldlthemep}
tglinsetftrp={this.state.tginsetftrp}
tgsbclk={this.state.tglsidebarp}
/>
filtermodal.js.js I'm using reactstrap modal
<Modal
isOpen={this.state.toggleModal}
toggle={this.togglem.bind(this)}
>
<ModalBody className={this.state.tgthemep ? ' mdlTDCW ':'mdlTLCB '}>
<Radiolayoutbtns permcldfn={this.permprntfn.bind(this)}/>
<div className="row">
<div className="col-6">
<label>Footer</label>
<div className="row">
<Toggleswitch label='Footer' name='Inset'
togFooter={this.tgFooter.bind(this)}/>
</div>
</div>
</div>
</ModalBody>
</Modal>
The other issue with filtermodal.js is for radio buttons my need is to select one default, which works. when I select another radio button, the state too is not preserved when as I close the modal the default radio button is selected due to which the selected radio buttons functionality doesn't work. Where am I going wrong?
RadioButton.js
<Input type="radio" name="radiobtns" value="" defaultChecked/>Default
<Input type="radio" name="radiobtns" value=""
onClick={()=>this.props.permcldfn(true)}/>Permanent
togglem tgFooter both re toggling states
permprntfn is the function which set states
permprntfn(prmchdp){
this.setState({permprntp:prmchdp},()=>this.props.flpermanentFn(this.state.permprntp))
console.log("--41----",this.state.permprntp)
}
can anyone please help me with this
Any help is appreciated
reactjs
asked Nov 15 '18 at 6:39
TestedTested
1741217
you say the state is not preserved. What do you mean by this... is it a specific value in state that is not being changed? is it the modal not being closed or something similar? could you add the code from thepermprntfnfunction?
– c-chavez
Nov 15 '18 at 10:10
@c-chavez i'm trying out lemme try a solution found if not ill come back. as well i have updated my code
– Tested
Nov 15 '18 at 10:17
add a comment |
I have a modal wherein I've radio buttons and toggle buttons. For toggle buttons what happens is when I toggle the modal it reflects but when I close the modal the states are not preserved i.e., states are not retained, the change is not reflecting except to the default once. I don't know where I'm going wrong.
footer.js
<footer className={"page-footer font-small blue "
+ (this.props.dltheme?
'darkfooter ' : 'lightfooter ')
+ (this.props.tglinsetftrp ?
'ftInsetTransIn ' : (this.props.tgsbclk ?
'ftDefTem ' : 'ftInsetOut '))}>
<div className="text-center">© 2018 Copyright:
</div>
</footer>
home.js
<Footer
dltheme={this.state.tgldlthemep}
tglinsetftrp={this.state.tginsetftrp}
tgsbclk={this.state.tglsidebarp}
/>
filtermodal.js.js I'm using reactstrap modal
<Modal
isOpen={this.state.toggleModal}
toggle={this.togglem.bind(this)}
>
<ModalBody className={this.state.tgthemep ? ' mdlTDCW ':'mdlTLCB '}>
<Radiolayoutbtns permcldfn={this.permprntfn.bind(this)}/>
<div className="row">
<div className="col-6">
<label>Footer</label>
<div className="row">
<Toggleswitch label='Footer' name='Inset'
togFooter={this.tgFooter.bind(this)}/>
</div>
</div>
</div>
</ModalBody>
</Modal>
The other issue with filtermodal.js is for radio buttons my need is to select one default, which works. when I select another radio button, the state too is not preserved when as I close the modal the default radio button is selected due to which the selected radio buttons functionality doesn't work. Where am I going wrong?
RadioButton.js
<Input type="radio" name="radiobtns" value="" defaultChecked/>Default
<Input type="radio" name="radiobtns" value=""
onClick={()=>this.props.permcldfn(true)}/>Permanent
togglem tgFooter both re toggling states
permprntfn is the function which set states
permprntfn(prmchdp){
this.setState({permprntp:prmchdp},()=>this.props.flpermanentFn(this.state.permprntp))
console.log("--41----",this.state.permprntp)
}
can anyone please help me with this
Any help is appreciated
reactjs
asked Nov 15 '18 at 6:39
TestedTested
1741217
I have a modal wherein I've radio buttons and toggle buttons. For toggle buttons what happens is when I toggle the modal it reflects but when I close the modal the states are not preserved i.e., states are not retained, the change is not reflecting except to the default once. I don't know where I'm going wrong.
footer.js
<footer className={"page-footer font-small blue "
+ (this.props.dltheme?
'darkfooter ' : 'lightfooter ')
+ (this.props.tglinsetftrp ?
'ftInsetTransIn ' : (this.props.tgsbclk ?
'ftDefTem ' : 'ftInsetOut '))}>
<div className="text-center">© 2018 Copyright:
</div>
</footer>
home.js
<Footer
dltheme={this.state.tgldlthemep}
tglinsetftrp={this.state.tginsetftrp}
tgsbclk={this.state.tglsidebarp}
/>
filtermodal.js.js I'm using reactstrap modal
<Modal
isOpen={this.state.toggleModal}
toggle={this.togglem.bind(this)}
>
<ModalBody className={this.state.tgthemep ? ' mdlTDCW ':'mdlTLCB '}>
<Radiolayoutbtns permcldfn={this.permprntfn.bind(this)}/>
<div className="row">
<div className="col-6">
<label>Footer</label>
<div className="row">
<Toggleswitch label='Footer' name='Inset'
togFooter={this.tgFooter.bind(this)}/>
</div>
</div>
</div>
</ModalBody>
</Modal>
The other issue with filtermodal.js is for radio buttons my need is to select one default, which works. when I select another radio button, the state too is not preserved when as I close the modal the default radio button is selected due to which the selected radio buttons functionality doesn't work. Where am I going wrong?
RadioButton.js
<Input type="radio" name="radiobtns" value="" defaultChecked/>Default
<Input type="radio" name="radiobtns" value=""
onClick={()=>this.props.permcldfn(true)}/>Permanent
togglem tgFooter both re toggling states
permprntfn is the function which set states
permprntfn(prmchdp){
this.setState({permprntp:prmchdp},()=>this.props.flpermanentFn(this.state.permprntp))
console.log("--41----",this.state.permprntp)
}
can anyone please help me with this
Any help is appreciated
reactjs
reactjs
asked Nov 15 '18 at 6:39
TestedTested
1741217
asked Nov 15 '18 at 6:39
TestedTested
1741217
edited Nov 15 '18 at 10:10
Tested
asked Nov 15 '18 at 6:39
TestedTested
1741217
asked Nov 15 '18 at 6:39
TestedTested
1741217
asked Nov 15 '18 at 6:39
TestedTested
1741217
1741217
you say the state is not preserved. What do you mean by this... is it a specific value in state that is not being changed? is it the modal not being closed or something similar? could you add the code from thepermprntfnfunction?
– c-chavez
Nov 15 '18 at 10:10
@c-chavez i'm trying out lemme try a solution found if not ill come back. as well i have updated my code
– Tested
Nov 15 '18 at 10:17
add a comment |
you say the state is not preserved. What do you mean by this... is it a specific value in state that is not being changed? is it the modal not being closed or something similar? could you add the code from thepermprntfnfunction?
– c-chavez
Nov 15 '18 at 10:10
@c-chavez i'm trying out lemme try a solution found if not ill come back. as well i have updated my code
– Tested
Nov 15 '18 at 10:17
you say the state is not preserved. What do you mean by this... is it a specific value in state that is not being changed? is it the modal not being closed or something similar? could you add the code from the
permprntfn function?– c-chavez
Nov 15 '18 at 10:10
you say the state is not preserved. What do you mean by this... is it a specific value in state that is not being changed? is it the modal not being closed or something similar? could you add the code from the
permprntfn function?– c-chavez
Nov 15 '18 at 10:10
@c-chavez i'm trying out lemme try a solution found if not ill come back. as well i have updated my code
– Tested
Nov 15 '18 at 10:17
@c-chavez i'm trying out lemme try a solution found if not ill come back. as well i have updated my code
– Tested
Nov 15 '18 at 10:17
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313757%2fmodal-values-are-not-retained-in-react-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53313757%2fmodal-values-are-not-retained-in-react-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you say the state is not preserved. What do you mean by this... is it a specific value in state that is not being changed? is it the modal not being closed or something similar? could you add the code from the
permprntfnfunction?– c-chavez
Nov 15 '18 at 10:10
@c-chavez i'm trying out lemme try a solution found if not ill come back. as well i have updated my code
– Tested
Nov 15 '18 at 10:17