Fetching input value and create a new array dynamically
0
Code
I am displaying input text field dynamically using api data. Now I want to take the value of each input field and store it in an object on buttonclick.
For example :
Textfield - generated using api data dynamically
firstname:
lastname:
.....
output
object:{firstname:"ac",lastname:"dc"} -> value taken from the user input and store in an object or array on buttonclick
javascript reactjs
asked Nov 23 at 2:35
contact dummy
1539
|
show 1 more comment
0
Code
I am displaying input text field dynamically using api data. Now I want to take the value of each input field and store it in an object on buttonclick.
For example :
Textfield - generated using api data dynamically
firstname:
lastname:
.....
output
object:{firstname:"ac",lastname:"dc"} -> value taken from the user input and store in an object or array on buttonclick
javascript reactjs
asked Nov 23 at 2:35
contact dummy
1539
When using a form, why not just work with the formdata? developer.mozilla.org/en-US/docs/Web/API/FormData
– connexo
Nov 23 at 2:47
@connexoI am not using the form here. I used just input text field dynamically generated.
– contact dummy
Nov 23 at 2:49
1
So why don't you create aformtag dynamically as well and profit from formdata?
– connexo
Nov 23 at 2:51
Is it your intent that each input have the same value?
– Shawn Andrews
Nov 23 at 2:52
Update the state and when saving convert the state object (values) to array using Array.reduce
– RedPandaz
Nov 23 at 2:54
|
show 1 more comment
0
0
0
Code
I am displaying input text field dynamically using api data. Now I want to take the value of each input field and store it in an object on buttonclick.
For example :
Textfield - generated using api data dynamically
firstname:
lastname:
.....
output
object:{firstname:"ac",lastname:"dc"} -> value taken from the user input and store in an object or array on buttonclick
javascript reactjs
asked Nov 23 at 2:35
contact dummy
1539
Code
I am displaying input text field dynamically using api data. Now I want to take the value of each input field and store it in an object on buttonclick.
For example :
Textfield - generated using api data dynamically
firstname:
lastname:
.....
output
object:{firstname:"ac",lastname:"dc"} -> value taken from the user input and store in an object or array on buttonclick
javascript reactjs
javascript reactjs
asked Nov 23 at 2:35
contact dummy
1539
asked Nov 23 at 2:35
contact dummy
1539
edited Nov 23 at 2:50
asked Nov 23 at 2:35
contact dummy
1539
asked Nov 23 at 2:35
contact dummy
1539
asked Nov 23 at 2:35
contact dummy
1539
1539
When using a form, why not just work with the formdata? developer.mozilla.org/en-US/docs/Web/API/FormData
– connexo
Nov 23 at 2:47
@connexoI am not using the form here. I used just input text field dynamically generated.
– contact dummy
Nov 23 at 2:49
1
So why don't you create aformtag dynamically as well and profit from formdata?
– connexo
Nov 23 at 2:51
Is it your intent that each input have the same value?
– Shawn Andrews
Nov 23 at 2:52
Update the state and when saving convert the state object (values) to array using Array.reduce
– RedPandaz
Nov 23 at 2:54
|
show 1 more comment
When using a form, why not just work with the formdata? developer.mozilla.org/en-US/docs/Web/API/FormData
– connexo
Nov 23 at 2:47
@connexoI am not using the form here. I used just input text field dynamically generated.
– contact dummy
Nov 23 at 2:49
1
So why don't you create aformtag dynamically as well and profit from formdata?
– connexo
Nov 23 at 2:51
Is it your intent that each input have the same value?
– Shawn Andrews
Nov 23 at 2:52
Update the state and when saving convert the state object (values) to array using Array.reduce
– RedPandaz
Nov 23 at 2:54
When using a form, why not just work with the formdata? developer.mozilla.org/en-US/docs/Web/API/FormData
– connexo
Nov 23 at 2:47
When using a form, why not just work with the formdata? developer.mozilla.org/en-US/docs/Web/API/FormData
– connexo
Nov 23 at 2:47
@connexoI am not using the form here. I used just input text field dynamically generated.
– contact dummy
Nov 23 at 2:49
@connexoI am not using the form here. I used just input text field dynamically generated.
– contact dummy
Nov 23 at 2:49
1
1
So why don't you create a
form tag dynamically as well and profit from formdata?– connexo
Nov 23 at 2:51
So why don't you create a
form tag dynamically as well and profit from formdata?– connexo
Nov 23 at 2:51
Is it your intent that each input have the same value?
– Shawn Andrews
Nov 23 at 2:52
Is it your intent that each input have the same value?
– Shawn Andrews
Nov 23 at 2:52
Update the state and when saving convert the state object (values) to array using Array.reduce
– RedPandaz
Nov 23 at 2:54
Update the state and when saving convert the state object (values) to array using Array.reduce
– RedPandaz
Nov 23 at 2:54
|
show 1 more comment
1 Answer
1
active
oldest
votes
0
using formdata issue was solve . Thank you @connexo
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData(),
values:
};
}
handleChange(i, e) {
this.setState({
values: { ...this.state.values, [i]: e.target.value }
});
}
save = () => {
var form = new FormData(document.getElementById("myForm"));
form.getAll("username");
const adddata = form.getAll("username")
console.log(adddata)
};
render() {
var fieldsArray = ;
for (var i = 0; i <= this.state.data; i++) {
fieldsArray.push(
<div>
<label>
<div className="label">{i}</div>
<input
type="text"
value={this.state.values[i]}
name={this.state.values[i]}
onChange={this.handleChange.bind(this, i)}
/>
</label>
</div>
);
}
var outputAdd = Object.entries(this.state.data[0]).map(([key, value]) => ({
key,
value
}));
const addrow = outputAdd;
var formData = new FormData();
const Add = ({ journals }) => (
<div>
<form id="myForm" name="myForm">
{journals.map(journal => (
<div>
<div>
<label for="username">{journal.key}</label>
<input type="username" id="username" name="username"/>
</div>
</div>
))}
</form>
</div>
);
return (
<div className="inputs">
<Add journals={addrow} />
{fieldsArray}
<button onClick={this.save}>save</button>
</div>
);
}
}
render(<App />, document.getElementById("root"));
answered Nov 23 at 3:55
contact dummy
1539
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
});
}
});
draft saved
draft discarded
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%2f53440015%2ffetching-input-value-and-create-a-new-array-dynamically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
using formdata issue was solve . Thank you @connexo
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData(),
values:
};
}
handleChange(i, e) {
this.setState({
values: { ...this.state.values, [i]: e.target.value }
});
}
save = () => {
var form = new FormData(document.getElementById("myForm"));
form.getAll("username");
const adddata = form.getAll("username")
console.log(adddata)
};
render() {
var fieldsArray = ;
for (var i = 0; i <= this.state.data; i++) {
fieldsArray.push(
<div>
<label>
<div className="label">{i}</div>
<input
type="text"
value={this.state.values[i]}
name={this.state.values[i]}
onChange={this.handleChange.bind(this, i)}
/>
</label>
</div>
);
}
var outputAdd = Object.entries(this.state.data[0]).map(([key, value]) => ({
key,
value
}));
const addrow = outputAdd;
var formData = new FormData();
const Add = ({ journals }) => (
<div>
<form id="myForm" name="myForm">
{journals.map(journal => (
<div>
<div>
<label for="username">{journal.key}</label>
<input type="username" id="username" name="username"/>
</div>
</div>
))}
</form>
</div>
);
return (
<div className="inputs">
<Add journals={addrow} />
{fieldsArray}
<button onClick={this.save}>save</button>
</div>
);
}
}
render(<App />, document.getElementById("root"));
answered Nov 23 at 3:55
contact dummy
1539
add a comment |
0
using formdata issue was solve . Thank you @connexo
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData(),
values:
};
}
handleChange(i, e) {
this.setState({
values: { ...this.state.values, [i]: e.target.value }
});
}
save = () => {
var form = new FormData(document.getElementById("myForm"));
form.getAll("username");
const adddata = form.getAll("username")
console.log(adddata)
};
render() {
var fieldsArray = ;
for (var i = 0; i <= this.state.data; i++) {
fieldsArray.push(
<div>
<label>
<div className="label">{i}</div>
<input
type="text"
value={this.state.values[i]}
name={this.state.values[i]}
onChange={this.handleChange.bind(this, i)}
/>
</label>
</div>
);
}
var outputAdd = Object.entries(this.state.data[0]).map(([key, value]) => ({
key,
value
}));
const addrow = outputAdd;
var formData = new FormData();
const Add = ({ journals }) => (
<div>
<form id="myForm" name="myForm">
{journals.map(journal => (
<div>
<div>
<label for="username">{journal.key}</label>
<input type="username" id="username" name="username"/>
</div>
</div>
))}
</form>
</div>
);
return (
<div className="inputs">
<Add journals={addrow} />
{fieldsArray}
<button onClick={this.save}>save</button>
</div>
);
}
}
render(<App />, document.getElementById("root"));
answered Nov 23 at 3:55
contact dummy
1539
add a comment |
0
0
0
using formdata issue was solve . Thank you @connexo
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData(),
values:
};
}
handleChange(i, e) {
this.setState({
values: { ...this.state.values, [i]: e.target.value }
});
}
save = () => {
var form = new FormData(document.getElementById("myForm"));
form.getAll("username");
const adddata = form.getAll("username")
console.log(adddata)
};
render() {
var fieldsArray = ;
for (var i = 0; i <= this.state.data; i++) {
fieldsArray.push(
<div>
<label>
<div className="label">{i}</div>
<input
type="text"
value={this.state.values[i]}
name={this.state.values[i]}
onChange={this.handleChange.bind(this, i)}
/>
</label>
</div>
);
}
var outputAdd = Object.entries(this.state.data[0]).map(([key, value]) => ({
key,
value
}));
const addrow = outputAdd;
var formData = new FormData();
const Add = ({ journals }) => (
<div>
<form id="myForm" name="myForm">
{journals.map(journal => (
<div>
<div>
<label for="username">{journal.key}</label>
<input type="username" id="username" name="username"/>
</div>
</div>
))}
</form>
</div>
);
return (
<div className="inputs">
<Add journals={addrow} />
{fieldsArray}
<button onClick={this.save}>save</button>
</div>
);
}
}
render(<App />, document.getElementById("root"));
answered Nov 23 at 3:55
contact dummy
1539
using formdata issue was solve . Thank you @connexo
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData(),
values:
};
}
handleChange(i, e) {
this.setState({
values: { ...this.state.values, [i]: e.target.value }
});
}
save = () => {
var form = new FormData(document.getElementById("myForm"));
form.getAll("username");
const adddata = form.getAll("username")
console.log(adddata)
};
render() {
var fieldsArray = ;
for (var i = 0; i <= this.state.data; i++) {
fieldsArray.push(
<div>
<label>
<div className="label">{i}</div>
<input
type="text"
value={this.state.values[i]}
name={this.state.values[i]}
onChange={this.handleChange.bind(this, i)}
/>
</label>
</div>
);
}
var outputAdd = Object.entries(this.state.data[0]).map(([key, value]) => ({
key,
value
}));
const addrow = outputAdd;
var formData = new FormData();
const Add = ({ journals }) => (
<div>
<form id="myForm" name="myForm">
{journals.map(journal => (
<div>
<div>
<label for="username">{journal.key}</label>
<input type="username" id="username" name="username"/>
</div>
</div>
))}
</form>
</div>
);
return (
<div className="inputs">
<Add journals={addrow} />
{fieldsArray}
<button onClick={this.save}>save</button>
</div>
);
}
}
render(<App />, document.getElementById("root"));
answered Nov 23 at 3:55
contact dummy
1539
answered Nov 23 at 3:55
contact dummy
1539
answered Nov 23 at 3:55
contact dummy
1539
answered Nov 23 at 3:55
contact dummy
1539
1539
add a comment |
add a comment |
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53440015%2ffetching-input-value-and-create-a-new-array-dynamically%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
When using a form, why not just work with the formdata? developer.mozilla.org/en-US/docs/Web/API/FormData
– connexo
Nov 23 at 2:47
@connexoI am not using the form here. I used just input text field dynamically generated.
– contact dummy
Nov 23 at 2:49
1
So why don't you create a
formtag dynamically as well and profit from formdata?– connexo
Nov 23 at 2:51
Is it your intent that each input have the same value?
– Shawn Andrews
Nov 23 at 2:52
Update the state and when saving convert the state object (values) to array using Array.reduce
– RedPandaz
Nov 23 at 2:54