Блог

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

Как бы я даже динамически добавил простой тег h2 к названию каждой вкладки аккордеона

 const content = {
  'Blogs': <Blogs />,
  'icon': <h2>hi</h2>,
  'Webinars': <Webinars />,
  'Podcast': <Podcasts />,
}

const AccordionSingle = (name) => {
  const [isOpen, setOpen] = useState(false);

  return (
    <div className="accordion-wrapper">
      <div
        className={`accordion-title ${isOpen ? "open" : ""}`}
        onClick={() => setOpen(!isOpen)}
      >
        {name}
      </div>
      <div className={`accordion-item ${!isOpen ? "collapsed" : ""}`}>
        <div className="accordion-content">{content[name]}</div>
      </div>
    </div>
  );
};

const Resources = (props) => {

  return (
    <>
      <Navbar />
      <div>
        {
          ['Webinars', 'Blogs', 'Podcast'].map(d => AccordionSingle(d))
        }
      </div>
    </>
  );
}

export default Resources;
 

если я правильно вас понял, вы хотите добавить значки ко всем заголовкам в вашем аккордеоне (или к любому другому тексту, например, h2). С этого момента непонятно, почему вы добавляете h2 в список товаров. Он должен быть добавлен внутри вашего div, содержащего заголовок:

 <div
  className={`accordion-title ${isOpen ? "open" : ""}`}
  onClick={() => setOpen(!isOpen)}
>
  <h2>text</h2>{name}
</div>
 

Кроме того, я бы рекомендовал хранить ваши элементы в виде массива, потому что на самом деле это список элементов с собственными свойствами. Это может выглядеть так:

 const items = [
  { 
    name: "Blogs",
    content: <Blogs />,
    icon: <FaPenFancy /> // it is just an example from react-icons
  },
  ...
]
 

Таким образом, вы можете позже использовать значок как часть заголовка вместо показанного выше.

Таким образом, лучше обновить код, отправив весь объект item в AccordionSingle props:

 // instead of:
{
  ['Webinars', 'Blogs', 'Podcast'].map(d => AccordionSingle(d))
}
// should be:
  items.map(d => AccordionSingle(d))

// and then extract all properties inside you AccordionSingle props:
const AccordionSingle = ({name, content, icon}) => {
  ...
}