Задача вывести Теги из объекта React JS

Рейтинг: 0Ответов: 1Опубликовано: 23.03.2023

Есть файл Wall.js

import React from 'react'
import Post from '../Post/Post';

function Wall() {
    const posts = [
        {
            id:2,
            author: {
                id: 1,
                avatar: 'https://alif-skills.pro/media/logo_alif.svg',
                name: 'Alif Skills',
            },
                content: 'Ну как, вы справились с домашкой?',
                photo: null,
                hit: true,
                likes: 222,
                likedByMe: true,
                tags: ['deadline', 'homework'],
                created: 1603774800,
        }, 
    ];

  return (
   <div>
         {posts.map(o => <Post key={o.id} post={o} />)}
   </div>
  )
}

export default Wall

и файл Post.js

import React from 'react'

function Post({post}) {
    const {author} = post;
    const {photo} = post;

    return (    
        <article>   
            <header>
                <img src={author.avatar} className="Post-avatar" width="50" height="50" alt={author.name} />
                <h5>{author.name}</h5>
                <div>{post.created}</div>
             {post.hit &&  <span>HIT</span>} 
            </header>
            <div>
                <div className="Post-content">{post.content}</div>
                {photo && <img src={photo.url} alt={photo.avatar} className="Post-photo"/>}
            </div>
            <footer>
                <span className="Post-likes">
                    <img src={post.likedByMe ? 'https://alif-skills.pro/media/liked.svg' : 'https://alif-skills.pro/media/unliked.svg'} alt="likes" width="20" height="20" />
                    <span className="Post-likes-count">{post.likes}</span>
                </span>
                <Tags  />
            </footer>
        </article>
    )
  }

export default Post

Надо сделать компонент Tags, который отображает список тегов и слово теги Сам компонент Tags отображается только тогда, когда в объекте поста есть поле tags чтобы в итоге было так

введите сюда описание изображения

Ответы

▲ 0

Компонент Tags принимает параметры tags (массив тегов) и рендерит их.

function Tags({ tags }) {
  if (tags.length === 0) {
    return null;
  }

  return (
    <>
      {tags.map((tag) => (
        <a href="#">{`#${tag}`}</a>
      ))}
    </>
  );
}