Как я могу получить пользовательские входы и распечатать его в один ряд? - PullRequest
Новая
       22

Как я могу получить пользовательские входы и распечатать его в один ряд?

0 голосов
/ 22 ноября 2018

Я хочу добавить элемент с (название, цвет и цена) , однако, когда я пытаюсь, он добавляет их вот так.Он должен составить строку, например PHONE - Цвет: 0 - Цена: 1000 , вместо него отображаются три вещи.Я пытался сделать один метод, но он тоже не работал.Как я могу написать код, чтобы получить эти входные данные в строке. 

</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}
    />
  ))  
}

Экспорт параметров по умолчанию;

1 Ответ

0 голосов
/ 22 ноября 2018

Что ж, происходит то, что вы печатаете весь массив, поэтому вместо того, чтобы получить желаемый результат одного из них, вы получаете сначала все одного типа, а затем все другие.

Один подход может быть: 

</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>

Я сделал это во время написания, так что, возможно, я забыл некоторые скобки или скобки, но идея в том, чтобы только одна карта и внутри этой карты получал по одному элементу за каждую итерацию.

Это может быть многолучше всего, чтобы в массиве был объект с 3 свойствами, по одному для каждого типа (опция, цвет, цена), а затем передача object.option, object.color и object.price каждому компоненту Option.

В этом подходеЯ также не принимаю во внимание, что props.prices [index] или props.colores [index] могут не существовать, я не знаю, могло ли это произойти, это просто чтобы показать концепцию.

...