Как отрендерить два независимых массива?

Question

[mrrangerr]

Всем привет, у меня в пропсы прилетает из родительского компонента два массива, эти массивы мне нужно отрендерить в компоненте, как это сделать?
У меня получается пройтись мапом только по одному массиву, в примере внизу замапил selectValues но уже второй массив selectOptions не получается(

export const Select = ({ name, selectOptions, selectValues }) => {
    return (
        <select name={name} className="custom-select">
            {selectValues.map(value => (
                <option key={value} value={value}></option>
            ))}
        </select>
    )
}

Comments

[Robur]

А где тот код где вы выводите selectOptions?

[mrrangerr]

Robur, забыл скинуть

// родительский компонент
export function Area({ handleIndexClick }) {

    const areaOptions = ["Выберите район", "Алмалинский", "Ауэзовский", "Бостандыкский", "Медеуский"]
    const areaValues = [0.95, 0.9, 1, 1.10]

    return (
        <Card title="Район" select={<Select name="areaSelect" selectOptions={areaOptions} selectValues={areaValues} />} handleIndexClick={handleIndexClick} />
    )
}

// дочерний компонент где рендерю массивы

export const Select = ({ name, selectOptions, selectValues }) => {
  return (
        <select  name={name} className="custom-select">
            {selectValues.map(value => (
                <option key={value} value={value}>{selectOptions.map(option => option)}</option>
            ))}
        </select>
    )
}

[Robur]

ну, для каждого value вы рендерите тег внутри каждого из которых вы рендерите все значения из option.
Не вижу что тут может "не получиться". Это будет работать, другой вопрос что вы очевидно хотели другого результата,
по видимому "для каждой пары value-option отреднерить тег с value из массива selectValues, и текстом из selectOptions".

проще всего вам будет даные переделать чтобы был один массив объектов {value: '', option: ''} и дальше для каждого рендерите один тег через map.

Если хотите именно так - то используйте индекс из map - selectOptions[index] чтобы взять соответствующий элемент.

[mrrangerr]

Robur, Тоже думал сделать так но почему-то решил что этот не вариант не подойдет, спасибо большое!

Answer 1

[supfiger]

Что приходит во второй массив?)
Может он пустой?
А может то вообще объект?

Выведи в консоль массив и глянь что там.

Comments

[mrrangerr]

Точно не пустой и точно не объект, эти массивы которые компонент должен принимать в качестве пропсов задаю сам, хочу делать так (т.е. через массивы) чтобы каждый раз не писать value и текст option'ов руками (их много), а просто прокидывать с помощью массивов

export function Area({ handleIndexClick }) {

    const areaOptions = ["Выберите район", "Алмалинский", "Ауэзовский", "Бостандыкский", "Медеуский"]
    const areaValues = [0.95, 0.9, 1, 1.10]

return (
        <Card title="Район" select={<Select name="areaSelect" selectOptions={areaOptions} selectValues={areaValues} />} handleIndexClick={handleIndexClick} />
    )
}