Отображение на карте в ReactJS - PullRequest
Новая
       7

Отображение на карте в ReactJS

1 голос
/ 01 марта 2020

Я пытаюсь отобразить каждое значение и шрифт.

Данные для каждого значения 

const test = ["440", "756", "28", "249", "345", "397", "301", "507", "648"]

Код для сопоставления поверх шрифта потрясающие значки 

const icons = [
        { id:0, name: faHeadphonesAlt, label:'Music'},
        { id:1, name: faPhone, label:'Phone'},
        { id:2, name: faHeartbeat, label:'Health'},
        { id:3, name: faShoppingBag, label: 'Shopping'},
        { id:4, name: faShieldAlt, label: 'Security'}
    ]

Попытка разрешения 

test.map(a => {
            return (
                <div>
                <button>
                    {
                        icons.map(icon => {
                            return(
                                <FontAwesomeIcon
                                    id={icon.id}
                                    icon={icon.name}
                                />

                            )
                        })
                    }
                    <hr />
                    £{a}
                </button>
                </div>
            )
        }
    )

Любые идеи о том, как Я могу заставить каждую иконку отображаться в каждой кнопке при отображении массива значений?

Ответы [ 2 ]

0 голосов
/ 01 марта 2020

возврат должен идти первым: 

return <div>
         {test.map(a => (
            <button>
                {
                    icons.map(icon => {
                        return(
                            <FontAwesomeIcon
                                id={icon.id}
                                icon={icon.name}
                            />

                        )
                    })
                }
                <hr />
                £{a}
            </button>
          )}
        </div>
0 голосов
/ 01 марта 2020

Привет, если вы хотите показать по одному значку для каждой кнопки, упорядоченной по индексу, посмотрите это

https://codesandbox.io/s/serene-driscoll-03s2n

вам не нужно отображать каждый значок Кроме того, у вас есть 9 кнопок и 5 значков, поэтому я делаю их 9 значками

, поэтому ваш рендеринг компонента JSX должен возвращать 

  return test.map((a, indx) => {
    return (
      <div>
        <button>
          <FontAwesomeIcon id={icons[indx].id} icon={icons[indx].name} />
          <hr />£{a}
        </button>
      </div>
    );
  });

Надеюсь, что справка будет *

...