Добавить значение из вложенного массива в имя класса div

Question

Я все еще новичок в React, JavaScript, и теперь я столкнулся с проблемой.

Каким-то образом можно добавить значение из вложенного массива в "родительский" класс div ?

У меня есть сообщения, и у каждого сообщения есть массив категорий. Мне нужно l oop через сообщения и показать заголовок, текст.

Я использовал .map до l oop через сообщения и показывать заголовок и текст. Но как я могу провести через категории oop, получить значение имени и добавить его в класс div?

Данные:

const posts = [{
    id: 1,
    title: 'My awesome post title',
    text: 'Hello this is the text',
    categories: [{
        id: 1,
        name: 'category1'
    }, {
        id: 2,
        name: 'category2'
    }],
}, {
    id: 2,
    title: 'My post title 2',
    text: 'Another post is here',
    categories: [{
        id: 1,
        name: 'category3',
    }, {
        id: 2,
        name: 'category10'
    }]
}];

Мне нужно это:

<div className="posts">
    <div className="post category1 category2">
        <h2>My awesome post title<h2>
        <p>Hello this is the text</p>
    </div>

    <div className="post category3 category10">
        <h2>My post title 2<h2>
        <p>Another post is here</p>
    </div>
</div>

Возможно ли это?

Большое спасибо

Answer 1

Когда вы передаете весь набор свойств объекта, которые соответствуют данным публикации, как набор компонентов <Post />, вы можете преобразовать один из этих объектов и выбросить его как атрибут элемента JSX, используя общий синтаксис JavaScript ( {}):

const Post = ({categories,title,text}) => {
  const className = ['post', ...categories.map(({name}) => name)].join(' ')
  return (
      <div {...{className}}>
          <h2>{title}</h2>
          <p>{text}</p>
      </div>
  )
}

Вы можете найти краткую демонстрацию ниже (проверьте ее с помощью DevTools, чтобы убедиться, что все имена классов применены правильно):

//dependencies
const { render } = ReactDOM

//source data
const posts = [{id:1,title:'My awesome post title',text:'Hello this is the text',categories:[{id:1,name:'category1'},{id:2,name:'category2'}],},{id:2,title:'My post title 2',text:'Another post is here',categories:[{id:1,name:'category3',},{id:2,name:'category10'}]}]

//post component
const Post = ({categories,title,text}) => {
  const className = ['post', ...categories.map(({name}) => name)].join(' ')
  return (
      <div {...{className}}>
          <h2>{title}</h2>
          <p>{text}</p>
      </div>
  )
}

//post feed component
const PostFeed = ({postsData}) => (
  <div className="posts">
    {postsData.map(({categories,title,text},key) => <Post {...{key,categories,title,text}} />)}
  </div>
)

//render
render(
  <PostFeed postsData={posts} />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Answer 2

Есть несколько способов решить эту проблему. Один из способов - использовать map для извлечения имен категорий в массив, затем join массив с пробелом, например:

let categories = [{
        id: 1,
        name: 'category1'
    }, {
        id: 2,
        name: 'category2'
    }];
    
const classList = categories.map( cat => cat.name ).join(" ");

console.log( classList );

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

let categories = [{
        id: 1,
        name: 'category1'
    }, {
        id: 2,
        name: 'category2'
    }];
    
const classList = categories.reduce( ( acc, cat ) => { acc += ` ${cat.name}`; return acc; }, "" );

console.log( classList );

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