Объединить два реакт файла в один

Question

у меня два файла которые возвращают фрагменты html. Они идентичны за исключением изображения. Дело в том, что сервер на изображение плейлиста и изображение жанра имеет разные пути.

props.items.images[0].url

и

props.items.icons[0].url

из-за этого мне пришлось разносить этот код по двум разным файлам. Как бы я мог их объединить в один?

const Playlist = props => {    

const playListClick = e => {
    props.onClick(e.target.title);
}    

return (
    <section id={props.selectedValue} className="collum collum__hidden" onClick={playListClick}>
    <a className="link__decoration link__track hover__track link__one" href="#">
      <div>
        {props.items.map((item, idx) => 
        <div className="container" key={idx + 1} title={item.id} >
          <div className="content__track" title={item.id}>
            <img className="img__tarck" title={item.id} src={item.images[0].url}/>
            <div className="name" title={item.id}>{item.name}</div>
          </div>
        </div>)}
      </div> 
    </a>
    </section>
);

}

const Genre = props => {    

const genreClick = e => {
    props.onClick(e.target.title);
}

return (
    <section id={props.selectedValue} className="collum collum__hidden" onClick={genreClick}>
    <a className="link__decoration link__track hover__track link__one" href="#">
      <div>
        {props.items.map((item, idx) => 
        <div className="container" key={idx + 1} title={item.id}>
          <div className="content__track" title={item.id}>
            <img className="img__tarck" title={item.id} src={item.icons[0].url}/>
            <div className="name" title={item.id}>{item.name}</div>
          </div>
        </div>)}
      </div> 
    </a>
    </section>
);

}

Answer 1

Можно просто пробросить какой-то переключатель (например isPlaylist) и смотреть на его значение:

const GenreAndPlaylist = props => {    

  const genreClick = e => {
      props.onClick(e.target.title);
  }

  return (
    <section id={props.selectedValue} className="collum collum__hidden" onClick={genreClick}>
      <a className="link__decoration link__track hover__track link__one" href="#">
        <div>
          {props.items.map((item, idx) => 
            <div className="container" key={idx + 1} title={item.id}>
              <div className="content__track" title={item.id}>
                <img className="img__tarck" title={item.id} src={item.[props.isPlaylist ? 'images' : 'icons'][0].url}/>
                <div className="name" title={item.id}>{item.name}</div>
              </div>
            </div>
          )}
        </div> 
      </a>
    </section>
  );

БЛОГ НА HUSL

Объединить два реакт файла в один

Ответы (1 шт):