Как вывести значения ключа массива разными блоками на страницу?

Question

[tanasov49]

Борюсь с проблемой в моем коде.
Суть следующая есть блок меню, на нем распложены кнопки подменю, надо сделать так, чтобы данные подменю выводились на каждом элементе li.
У меня проблема все значения subtitle водятся одним тегом li, а надо чтобы были разными. уже сломал голову. не знаю как решить задачу помогите!
Сам код
Массив с данными, в ключе subtitle находятся кнопки подменю

const [menuText, setTextMenu] = useState([
        {title: 'Каталог', 
        subtitle: ['Привет', 'Мир']},
        {title: 'Индивидуальная мебель'},
        {title: 'Контакты'},
        {title: 'О компании'},
        {title: '[phone]'}
    ])

а вот сам код в котором у меня не выводятся разными блоками

export default function HeaderMenuLinks(props) {
  return (
    <React.Fragment>
    {props.menuText.map((menu, key, index) => (
        <li className='header-menu__link' key={key}>
            <p>{menu.title}</p>
            <ul  className='link-menu'>
                <li className='link-menu__subtitle'>{menu.subtitle}{text[index]}</li>
               </ul> 
        </li>
    ))}
    </React.Fragment>
  )
}

т.е. значения subtitle выводятся одним блоком li ПриветМир
Не получается пройтись именно map по длине subtitle

Comments

[0xD34F]

Может, прежде чем за react браться, стоило js освоить?

Ну и вопрос нормально оформить не помешало бы (3.1, 3.4, 3.8).

[Алан Гибизов]

Фрагменты кода надо оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.

[tanasov49]

Алан Гибизов, 0xD34F, Спасибо вам огромное за столь понятное объяснение решение вопроса.
Но вы тоже нарушаете регламент 5.14. Флуд. 0xD34F, Я прошу помощи, зачем писать про освоение js. Есть такой затык, может есть очевидный ответ, зачем занимаетесь флудом. Не хотите отвечать не пишите ничего. Данное сообщество создавалось для взаимопомощи, а не пустого трепа

[Модератор]

tanasov49, в задачу кураторов входит повышение вероятности получения адекватных ответов. Для этого надо приводить вопросы к требованиям Регламента.
В частности, вам необходимо исправить код в вопросе в соответствии с п.3.8 Регламента. В противном случае вопрос может быть удален модератором.

Также обратите внимание на п.3.4 Регламента.

В случае неоднократных нарушений и игнора указаний модераторов и кураторов ресурса ваш аккаунт может быть заблокирован временно или навсегда.

Будьте благоразумны.

Answer 1

[Артем]

export default function HeaderMenuLinks(props) {
  return (
    <React.Fragment>
    {props.menuText.map((menu, key) => (
        const subTitle = menu.subtitle || false
        <li className='header-menu__link' key={key}>
            <p>{menu.title}</p>
            { subTitle && 
            <ul  className='link-menu'>
                {subTitle.map((sm, skey) => (
                <li className='link-menu__subtitle' key={skey}>{sm}</li>
                ))}
            </ul> 
          }
        </li>
    ))}
    </React.Fragment>
  )
}

Comments

[tanasov49]

Спасибо тебе огромное! Вот только при объявление const он выдавал ошибку. Но все же решение получилось. поправил немного

<React.Fragment>
    {props.menuText.map((menu, key) => (
        <li className='header-menu__link' key={key}>
            <p>{menu.title}</p>
            { menu.subtitle && 
            <ul  className='link-menu'>
                {menu.subtitle.map((sm, skey) => (
                <li className='link-menu__subtitle' key={skey}>{sm}</li>
                ))}
            </ul> 
          }
        </li>
    ))}
    </React.Fragment>

[Артем]

tanasov49, Да, недоглядел скобки.