Mixing
Dynamically adding Input form field issue reactjs
I am trying to add one cascaded form(inner) field dynamically on click of a button +Add Content. The array for the field is getting updated but the view is still same.
However, when I try to add the outer field on click of a button +Add Heading dynamically its getting added with no issues.
Below is the stackblitz url for reference. Thanks in advance.
https://stackblitz.com/edit/react-utjwsu?embed=1&file=index.js
javascript reactjs
asked Jan 2 at 14:18
richa singhricha singh
335
add a comment |
I am trying to add one cascaded form(inner) field dynamically on click of a button +Add Content. The array for the field is getting updated but the view is still same.
However, when I try to add the outer field on click of a button +Add Heading dynamically its getting added with no issues.
Below is the stackblitz url for reference. Thanks in advance.
https://stackblitz.com/edit/react-utjwsu?embed=1&file=index.js
javascript reactjs
asked Jan 2 at 14:18
richa singhricha singh
335
add a comment |
I am trying to add one cascaded form(inner) field dynamically on click of a button +Add Content. The array for the field is getting updated but the view is still same.
However, when I try to add the outer field on click of a button +Add Heading dynamically its getting added with no issues.
Below is the stackblitz url for reference. Thanks in advance.
https://stackblitz.com/edit/react-utjwsu?embed=1&file=index.js
javascript reactjs
asked Jan 2 at 14:18
richa singhricha singh
335
I am trying to add one cascaded form(inner) field dynamically on click of a button +Add Content. The array for the field is getting updated but the view is still same.
However, when I try to add the outer field on click of a button +Add Heading dynamically its getting added with no issues.
Below is the stackblitz url for reference. Thanks in advance.
https://stackblitz.com/edit/react-utjwsu?embed=1&file=index.js
javascript reactjs
javascript reactjs
asked Jan 2 at 14:18
richa singhricha singh
335
asked Jan 2 at 14:18
richa singhricha singh
335
asked Jan 2 at 14:18
richa singhricha singh
335
asked Jan 2 at 14:18
richa singhricha singh
335
asked Jan 2 at 14:18
richa singhricha singh
335
335
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
You're only ever rendering one Content field, and the {this.AddContentInput} isn't valid syntax. You can edit the AddContentBox method to render all of the Content fields:
Original:
...
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.AddContentInput}
...
Replaced with:
...
{ this.AddContentFields(element) }
...
and
AddContentFields(element) {
return element.Content.map(content => {
return (
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
);
})
}
Here's an edited version of the app with my changes: https://stackblitz.com/edit/react-lcy2te
answered Jan 2 at 14:45
dandan
826620
Thank you all for your timely help. Appreciate it :)
– richa singh
Jan 2 at 15:46
add a comment |
Your code is working fine and the state is updating perfectly. The problem is that the Content part is added only once in your code. I just used a function which you already added in it
{this.addContentTextBox(element.Content)}
Just replace the AddContentBox function with this:
AddContentBox(){
return this.state.content.map((element,i)=>(
<div className="header-content" key={i} >
<div className="heading-content-wrapper">
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Heading</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.addContentTextBox(element.Content)}
{this.AddContentInput}
<FormGroup>
<Button color="success" onClick={this.AddContentInput.bind(this,i)}>+ Add Content</Button>
</FormGroup>
</div>
</div>
))
}You have the code in that file, but i think you forgot to add it in the function.
Hope it helps :)
answered Jan 2 at 14:53
ThinkerThinker
2,254625
add a comment |
You are mixing the content variable. In your function AddContentBox() you are using this.state.content.map(...)
this.state.content is an array of object like {Heading: '', Content: [{value: ''}]}
BUT in your function AddContentInput() your are pushing an object inside an object of this array contents[index].Content.push({value:''})
Depending on your needs you should either push in the root array contents.push({Heading: '', Content: [{value: ''}]} OR iterate the right array in your function AddContentBox() and use this.state.content[0].Content.map(...)
answered Jan 2 at 14:51
WeedozeWeedoze
9,6322440
add a comment |
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%2f54007949%2fdynamically-adding-input-form-field-issue-reactjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You're only ever rendering one Content field, and the {this.AddContentInput} isn't valid syntax. You can edit the AddContentBox method to render all of the Content fields:
Original:
...
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.AddContentInput}
...
Replaced with:
...
{ this.AddContentFields(element) }
...
and
AddContentFields(element) {
return element.Content.map(content => {
return (
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
);
})
}
Here's an edited version of the app with my changes: https://stackblitz.com/edit/react-lcy2te
answered Jan 2 at 14:45
dandan
826620
Thank you all for your timely help. Appreciate it :)
– richa singh
Jan 2 at 15:46
add a comment |
You're only ever rendering one Content field, and the {this.AddContentInput} isn't valid syntax. You can edit the AddContentBox method to render all of the Content fields:
Original:
...
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.AddContentInput}
...
Replaced with:
...
{ this.AddContentFields(element) }
...
and
AddContentFields(element) {
return element.Content.map(content => {
return (
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
);
})
}
Here's an edited version of the app with my changes: https://stackblitz.com/edit/react-lcy2te
answered Jan 2 at 14:45
dandan
826620
Thank you all for your timely help. Appreciate it :)
– richa singh
Jan 2 at 15:46
add a comment |
You're only ever rendering one Content field, and the {this.AddContentInput} isn't valid syntax. You can edit the AddContentBox method to render all of the Content fields:
Original:
...
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.AddContentInput}
...
Replaced with:
...
{ this.AddContentFields(element) }
...
and
AddContentFields(element) {
return element.Content.map(content => {
return (
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
);
})
}
Here's an edited version of the app with my changes: https://stackblitz.com/edit/react-lcy2te
answered Jan 2 at 14:45
dandan
826620
You're only ever rendering one Content field, and the {this.AddContentInput} isn't valid syntax. You can edit the AddContentBox method to render all of the Content fields:
Original:
...
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.AddContentInput}
...
Replaced with:
...
{ this.AddContentFields(element) }
...
and
AddContentFields(element) {
return element.Content.map(content => {
return (
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Content</Label>
<input className="form-control" type="text"/>
</FormGroup>
);
})
}
Here's an edited version of the app with my changes: https://stackblitz.com/edit/react-lcy2te
answered Jan 2 at 14:45
dandan
826620
answered Jan 2 at 14:45
dandan
826620
answered Jan 2 at 14:45
dandan
826620
answered Jan 2 at 14:45
dandan
826620
826620
Thank you all for your timely help. Appreciate it :)
– richa singh
Jan 2 at 15:46
add a comment |
Thank you all for your timely help. Appreciate it :)
– richa singh
Jan 2 at 15:46
Thank you all for your timely help. Appreciate it :)
– richa singh
Jan 2 at 15:46
Thank you all for your timely help. Appreciate it :)
– richa singh
Jan 2 at 15:46
add a comment |
Your code is working fine and the state is updating perfectly. The problem is that the Content part is added only once in your code. I just used a function which you already added in it
{this.addContentTextBox(element.Content)}
Just replace the AddContentBox function with this:
AddContentBox(){
return this.state.content.map((element,i)=>(
<div className="header-content" key={i} >
<div className="heading-content-wrapper">
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Heading</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.addContentTextBox(element.Content)}
{this.AddContentInput}
<FormGroup>
<Button color="success" onClick={this.AddContentInput.bind(this,i)}>+ Add Content</Button>
</FormGroup>
</div>
</div>
))
}You have the code in that file, but i think you forgot to add it in the function.
Hope it helps :)
answered Jan 2 at 14:53
ThinkerThinker
2,254625
add a comment |
Your code is working fine and the state is updating perfectly. The problem is that the Content part is added only once in your code. I just used a function which you already added in it
{this.addContentTextBox(element.Content)}
Just replace the AddContentBox function with this:
AddContentBox(){
return this.state.content.map((element,i)=>(
<div className="header-content" key={i} >
<div className="heading-content-wrapper">
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Heading</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.addContentTextBox(element.Content)}
{this.AddContentInput}
<FormGroup>
<Button color="success" onClick={this.AddContentInput.bind(this,i)}>+ Add Content</Button>
</FormGroup>
</div>
</div>
))
}You have the code in that file, but i think you forgot to add it in the function.
Hope it helps :)
answered Jan 2 at 14:53
ThinkerThinker
2,254625
add a comment |
Your code is working fine and the state is updating perfectly. The problem is that the Content part is added only once in your code. I just used a function which you already added in it
{this.addContentTextBox(element.Content)}
Just replace the AddContentBox function with this:
AddContentBox(){
return this.state.content.map((element,i)=>(
<div className="header-content" key={i} >
<div className="heading-content-wrapper">
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Heading</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.addContentTextBox(element.Content)}
{this.AddContentInput}
<FormGroup>
<Button color="success" onClick={this.AddContentInput.bind(this,i)}>+ Add Content</Button>
</FormGroup>
</div>
</div>
))
}You have the code in that file, but i think you forgot to add it in the function.
Hope it helps :)
answered Jan 2 at 14:53
ThinkerThinker
2,254625
Your code is working fine and the state is updating perfectly. The problem is that the Content part is added only once in your code. I just used a function which you already added in it
{this.addContentTextBox(element.Content)}
Just replace the AddContentBox function with this:
AddContentBox(){
return this.state.content.map((element,i)=>(
<div className="header-content" key={i} >
<div className="heading-content-wrapper">
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Heading</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.addContentTextBox(element.Content)}
{this.AddContentInput}
<FormGroup>
<Button color="success" onClick={this.AddContentInput.bind(this,i)}>+ Add Content</Button>
</FormGroup>
</div>
</div>
))
}You have the code in that file, but i think you forgot to add it in the function.
Hope it helps :)
AddContentBox(){
return this.state.content.map((element,i)=>(
<div className="header-content" key={i} >
<div className="heading-content-wrapper">
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Heading</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.addContentTextBox(element.Content)}
{this.AddContentInput}
<FormGroup>
<Button color="success" onClick={this.AddContentInput.bind(this,i)}>+ Add Content</Button>
</FormGroup>
</div>
</div>
))
}AddContentBox(){
return this.state.content.map((element,i)=>(
<div className="header-content" key={i} >
<div className="heading-content-wrapper">
<FormGroup>
<Label className="set-label-pos upload-img" for="Heading">Heading</Label>
<input className="form-control" type="text"/>
</FormGroup>
{this.addContentTextBox(element.Content)}
{this.AddContentInput}
<FormGroup>
<Button color="success" onClick={this.AddContentInput.bind(this,i)}>+ Add Content</Button>
</FormGroup>
</div>
</div>
))
}answered Jan 2 at 14:53
ThinkerThinker
2,254625
answered Jan 2 at 14:53
ThinkerThinker
2,254625
answered Jan 2 at 14:53
ThinkerThinker
2,254625
answered Jan 2 at 14:53
ThinkerThinker
2,254625
2,254625
add a comment |
add a comment |
You are mixing the content variable. In your function AddContentBox() you are using this.state.content.map(...)
this.state.content is an array of object like {Heading: '', Content: [{value: ''}]}
BUT in your function AddContentInput() your are pushing an object inside an object of this array contents[index].Content.push({value:''})
Depending on your needs you should either push in the root array contents.push({Heading: '', Content: [{value: ''}]} OR iterate the right array in your function AddContentBox() and use this.state.content[0].Content.map(...)
answered Jan 2 at 14:51
WeedozeWeedoze
9,6322440
add a comment |
You are mixing the content variable. In your function AddContentBox() you are using this.state.content.map(...)
this.state.content is an array of object like {Heading: '', Content: [{value: ''}]}
BUT in your function AddContentInput() your are pushing an object inside an object of this array contents[index].Content.push({value:''})
Depending on your needs you should either push in the root array contents.push({Heading: '', Content: [{value: ''}]} OR iterate the right array in your function AddContentBox() and use this.state.content[0].Content.map(...)
answered Jan 2 at 14:51
WeedozeWeedoze
9,6322440
add a comment |
You are mixing the content variable. In your function AddContentBox() you are using this.state.content.map(...)
this.state.content is an array of object like {Heading: '', Content: [{value: ''}]}
BUT in your function AddContentInput() your are pushing an object inside an object of this array contents[index].Content.push({value:''})
Depending on your needs you should either push in the root array contents.push({Heading: '', Content: [{value: ''}]} OR iterate the right array in your function AddContentBox() and use this.state.content[0].Content.map(...)
answered Jan 2 at 14:51
WeedozeWeedoze
9,6322440
You are mixing the content variable. In your function AddContentBox() you are using this.state.content.map(...)
this.state.content is an array of object like {Heading: '', Content: [{value: ''}]}
BUT in your function AddContentInput() your are pushing an object inside an object of this array contents[index].Content.push({value:''})
Depending on your needs you should either push in the root array contents.push({Heading: '', Content: [{value: ''}]} OR iterate the right array in your function AddContentBox() and use this.state.content[0].Content.map(...)
answered Jan 2 at 14:51
WeedozeWeedoze
9,6322440
answered Jan 2 at 14:51
WeedozeWeedoze
9,6322440
answered Jan 2 at 14:51
WeedozeWeedoze
9,6322440
answered Jan 2 at 14:51
WeedozeWeedoze
9,6322440
9,6322440
add a comment |
add a comment |
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%2f54007949%2fdynamically-adding-input-form-field-issue-reactjs%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
