How can I get the user Inputs and print it in a single row?
I want to add an Item with (name color and price) however when I try it adds them like that. It should make a row such as PHONE - Color: 0 - Price: 1000 instead of it displays three things. I tried to make a one method but it did not work too. How can I write the code in order to get these inputs on a line.
</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
props.options.map((option, index) => (
<Option
key={option}
optionText={option}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
{
props.colors.map((color, index) => (
<Option
colorText = {color}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
{
props.prices.map((price, index) => (
<Option
priceText = {price}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
export default Options;
javascript reactjs react-native input user-input
asked Nov 21 '18 at 21:09
SeriousEngineerSeriousEngineer
126
add a comment |
I want to add an Item with (name color and price) however when I try it adds them like that. It should make a row such as PHONE - Color: 0 - Price: 1000 instead of it displays three things. I tried to make a one method but it did not work too. How can I write the code in order to get these inputs on a line.
</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
props.options.map((option, index) => (
<Option
key={option}
optionText={option}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
{
props.colors.map((color, index) => (
<Option
colorText = {color}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
{
props.prices.map((price, index) => (
<Option
priceText = {price}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
export default Options;
javascript reactjs react-native input user-input
asked Nov 21 '18 at 21:09
SeriousEngineerSeriousEngineer
126
To be honest, from your question, I have very little idea what you want. Can you please show or explain clearly what it is you're trying to do compared to what you have?
– zfrisch
Nov 21 '18 at 21:29
@zfrisch I would like to get inputs from the user by text ares. I can get the inputs and it shows the added product-color-price as 3 rows. It should be a single line for an added item. You can get the project and try it at github.com/ErkAydogan/React
– SeriousEngineer
Nov 21 '18 at 21:40
Oh, I see. Where is your code that shows what happens when the user clicks add option?
– zfrisch
Nov 21 '18 at 21:44
It is the handleAddOption function at AddOption.js @zfrisch
– SeriousEngineer
Nov 21 '18 at 22:00
add a comment |
I want to add an Item with (name color and price) however when I try it adds them like that. It should make a row such as PHONE - Color: 0 - Price: 1000 instead of it displays three things. I tried to make a one method but it did not work too. How can I write the code in order to get these inputs on a line.
</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
props.options.map((option, index) => (
<Option
key={option}
optionText={option}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
{
props.colors.map((color, index) => (
<Option
colorText = {color}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
{
props.prices.map((price, index) => (
<Option
priceText = {price}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
export default Options;
javascript reactjs react-native input user-input
asked Nov 21 '18 at 21:09
SeriousEngineerSeriousEngineer
126
I want to add an Item with (name color and price) however when I try it adds them like that. It should make a row such as PHONE - Color: 0 - Price: 1000 instead of it displays three things. I tried to make a one method but it did not work too. How can I write the code in order to get these inputs on a line.
</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
props.options.map((option, index) => (
<Option
key={option}
optionText={option}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
{
props.colors.map((color, index) => (
<Option
colorText = {color}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
{
props.prices.map((price, index) => (
<Option
priceText = {price}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
))
}
export default Options;
javascript reactjs react-native input user-input
javascript reactjs react-native input user-input
asked Nov 21 '18 at 21:09
SeriousEngineerSeriousEngineer
126
asked Nov 21 '18 at 21:09
SeriousEngineerSeriousEngineer
126
edited Nov 22 '18 at 23:07
SeriousEngineer
asked Nov 21 '18 at 21:09
SeriousEngineerSeriousEngineer
126
asked Nov 21 '18 at 21:09
SeriousEngineerSeriousEngineer
126
asked Nov 21 '18 at 21:09
SeriousEngineerSeriousEngineer
126
126
To be honest, from your question, I have very little idea what you want. Can you please show or explain clearly what it is you're trying to do compared to what you have?
– zfrisch
Nov 21 '18 at 21:29
@zfrisch I would like to get inputs from the user by text ares. I can get the inputs and it shows the added product-color-price as 3 rows. It should be a single line for an added item. You can get the project and try it at github.com/ErkAydogan/React
– SeriousEngineer
Nov 21 '18 at 21:40
Oh, I see. Where is your code that shows what happens when the user clicks add option?
– zfrisch
Nov 21 '18 at 21:44
It is the handleAddOption function at AddOption.js @zfrisch
– SeriousEngineer
Nov 21 '18 at 22:00
add a comment |
To be honest, from your question, I have very little idea what you want. Can you please show or explain clearly what it is you're trying to do compared to what you have?
– zfrisch
Nov 21 '18 at 21:29
@zfrisch I would like to get inputs from the user by text ares. I can get the inputs and it shows the added product-color-price as 3 rows. It should be a single line for an added item. You can get the project and try it at github.com/ErkAydogan/React
– SeriousEngineer
Nov 21 '18 at 21:40
Oh, I see. Where is your code that shows what happens when the user clicks add option?
– zfrisch
Nov 21 '18 at 21:44
It is the handleAddOption function at AddOption.js @zfrisch
– SeriousEngineer
Nov 21 '18 at 22:00
To be honest, from your question, I have very little idea what you want. Can you please show or explain clearly what it is you're trying to do compared to what you have?
– zfrisch
Nov 21 '18 at 21:29
To be honest, from your question, I have very little idea what you want. Can you please show or explain clearly what it is you're trying to do compared to what you have?
– zfrisch
Nov 21 '18 at 21:29
@zfrisch I would like to get inputs from the user by text ares. I can get the inputs and it shows the added product-color-price as 3 rows. It should be a single line for an added item. You can get the project and try it at github.com/ErkAydogan/React
– SeriousEngineer
Nov 21 '18 at 21:40
@zfrisch I would like to get inputs from the user by text ares. I can get the inputs and it shows the added product-color-price as 3 rows. It should be a single line for an added item. You can get the project and try it at github.com/ErkAydogan/React
– SeriousEngineer
Nov 21 '18 at 21:40
Oh, I see. Where is your code that shows what happens when the user clicks add option?
– zfrisch
Nov 21 '18 at 21:44
Oh, I see. Where is your code that shows what happens when the user clicks add option?
– zfrisch
Nov 21 '18 at 21:44
It is the handleAddOption function at AddOption.js @zfrisch
– SeriousEngineer
Nov 21 '18 at 22:00
It is the handleAddOption function at AddOption.js @zfrisch
– SeriousEngineer
Nov 21 '18 at 22:00
add a comment |
1 Answer
1
active
oldest
votes
Well, what's happening is that you are printing the whole array so instead of getting the desire result of one of each you get first all of one type and then all of the other.
One approach can be:
</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
props.options.map((option, index) => (
<div key={option}>
<Option
optionText={option}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
<Option
colorText = {props.colors[index]}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
<Option
priceText = {props.prices[index]}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
</div>
))
}
</div>
I did it while writing so maybe I forgot some parenthesis or bracket but the idea is only one map and inside that map getting one element each iteration.
This could be much better is the array had an object with 3 properties, one for each type(option, color, price) and then passing object.option, object.color and object.price to each Option component.
In this approach I'm also not taking into account that props.prices[index] or props.colores[index] might not exist, I don't know if that might happen, it was just to show the concept.
answered Nov 21 '18 at 21:45
Rodrigo Martín de LamoRodrigo Martín de Lamo
1167
The concept is correct, but I'm confused by the option tags in OPs code. I'm not sure if this would affect the output or the input.
– zfrisch
Nov 21 '18 at 22:28
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%2f53420509%2fhow-can-i-get-the-user-inputs-and-print-it-in-a-single-row%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
Well, what's happening is that you are printing the whole array so instead of getting the desire result of one of each you get first all of one type and then all of the other.
One approach can be:
</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
props.options.map((option, index) => (
<div key={option}>
<Option
optionText={option}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
<Option
colorText = {props.colors[index]}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
<Option
priceText = {props.prices[index]}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
</div>
))
}
</div>
I did it while writing so maybe I forgot some parenthesis or bracket but the idea is only one map and inside that map getting one element each iteration.
This could be much better is the array had an object with 3 properties, one for each type(option, color, price) and then passing object.option, object.color and object.price to each Option component.
In this approach I'm also not taking into account that props.prices[index] or props.colores[index] might not exist, I don't know if that might happen, it was just to show the concept.
answered Nov 21 '18 at 21:45
Rodrigo Martín de LamoRodrigo Martín de Lamo
1167
The concept is correct, but I'm confused by the option tags in OPs code. I'm not sure if this would affect the output or the input.
– zfrisch
Nov 21 '18 at 22:28
add a comment |
Well, what's happening is that you are printing the whole array so instead of getting the desire result of one of each you get first all of one type and then all of the other.
One approach can be:
</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
props.options.map((option, index) => (
<div key={option}>
<Option
optionText={option}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
<Option
colorText = {props.colors[index]}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
<Option
priceText = {props.prices[index]}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
</div>
))
}
</div>
I did it while writing so maybe I forgot some parenthesis or bracket but the idea is only one map and inside that map getting one element each iteration.
This could be much better is the array had an object with 3 properties, one for each type(option, color, price) and then passing object.option, object.color and object.price to each Option component.
In this approach I'm also not taking into account that props.prices[index] or props.colores[index] might not exist, I don't know if that might happen, it was just to show the concept.
answered Nov 21 '18 at 21:45
Rodrigo Martín de LamoRodrigo Martín de Lamo
1167
The concept is correct, but I'm confused by the option tags in OPs code. I'm not sure if this would affect the output or the input.
– zfrisch
Nov 21 '18 at 22:28
add a comment |
Well, what's happening is that you are printing the whole array so instead of getting the desire result of one of each you get first all of one type and then all of the other.
One approach can be:
</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
props.options.map((option, index) => (
<div key={option}>
<Option
optionText={option}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
<Option
colorText = {props.colors[index]}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
<Option
priceText = {props.prices[index]}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
</div>
))
}
</div>
I did it while writing so maybe I forgot some parenthesis or bracket but the idea is only one map and inside that map getting one element each iteration.
This could be much better is the array had an object with 3 properties, one for each type(option, color, price) and then passing object.option, object.color and object.price to each Option component.
In this approach I'm also not taking into account that props.prices[index] or props.colores[index] might not exist, I don't know if that might happen, it was just to show the concept.
answered Nov 21 '18 at 21:45
Rodrigo Martín de LamoRodrigo Martín de Lamo
1167
Well, what's happening is that you are printing the whole array so instead of getting the desire result of one of each you get first all of one type and then all of the other.
One approach can be:
</div>
{props.options.length === 0 && <p className="widget__message">Please add a Product to get started!</p>}
{
props.options.map((option, index) => (
<div key={option}>
<Option
optionText={option}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
<Option
colorText = {props.colors[index]}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
<Option
priceText = {props.prices[index]}
count= {index + 1}
handleDeleteOption={props.handleDeleteOption}
/>
</div>
))
}
</div>
I did it while writing so maybe I forgot some parenthesis or bracket but the idea is only one map and inside that map getting one element each iteration.
This could be much better is the array had an object with 3 properties, one for each type(option, color, price) and then passing object.option, object.color and object.price to each Option component.
In this approach I'm also not taking into account that props.prices[index] or props.colores[index] might not exist, I don't know if that might happen, it was just to show the concept.
answered Nov 21 '18 at 21:45
Rodrigo Martín de LamoRodrigo Martín de Lamo
1167
answered Nov 21 '18 at 21:45
Rodrigo Martín de LamoRodrigo Martín de Lamo
1167
answered Nov 21 '18 at 21:45
Rodrigo Martín de LamoRodrigo Martín de Lamo
1167
answered Nov 21 '18 at 21:45
Rodrigo Martín de LamoRodrigo Martín de Lamo
1167
1167
The concept is correct, but I'm confused by the option tags in OPs code. I'm not sure if this would affect the output or the input.
– zfrisch
Nov 21 '18 at 22:28
add a comment |
The concept is correct, but I'm confused by the option tags in OPs code. I'm not sure if this would affect the output or the input.
– zfrisch
Nov 21 '18 at 22:28
The concept is correct, but I'm confused by the option tags in OPs code. I'm not sure if this would affect the output or the input.
– zfrisch
Nov 21 '18 at 22:28
The concept is correct, but I'm confused by the option tags in OPs code. I'm not sure if this would affect the output or the input.
– zfrisch
Nov 21 '18 at 22:28
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%2f53420509%2fhow-can-i-get-the-user-inputs-and-print-it-in-a-single-row%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
To be honest, from your question, I have very little idea what you want. Can you please show or explain clearly what it is you're trying to do compared to what you have?
– zfrisch
Nov 21 '18 at 21:29
@zfrisch I would like to get inputs from the user by text ares. I can get the inputs and it shows the added product-color-price as 3 rows. It should be a single line for an added item. You can get the project and try it at github.com/ErkAydogan/React
– SeriousEngineer
Nov 21 '18 at 21:40
Oh, I see. Where is your code that shows what happens when the user clicks add option?
– zfrisch
Nov 21 '18 at 21:44
It is the handleAddOption function at AddOption.js @zfrisch
– SeriousEngineer
Nov 21 '18 at 22:00