import React, { Component } from 'react';
import { Button } from 'antd';

export default class PlayList extends Component {
  render() {
    const { lists, searchs, showPlaylist, handleAdd, handleRemove } = this.props;
    return (
      <div>
        {
          showPlaylist ?
          lists.map((list, index) => (
            <div key={index} style={{display: 'flex', marginTop: '10px'}} >
              <div>
                <img src={list.img} alt="" style={{width:'250px'}} />
              </div>
              <div style={{display: 'flex', flexDirection:'column', justifyContent:'space-evenly', width: '100%', textAlign:'center', marginLeft: '8px'}}>
                <div>{list.title}</div>
                <Button type="primary" onClick={ () => handleRemove(index) } >REMOVE</Button>
              </div>
            </div>
          )):
          searchs.map((search, index) => (
            <div key={index} style={{display: 'flex', marginTop: '10px'}} >
              <div>
                <img src={search.snippet.thumbnails.medium.url} alt="" style={{width:'250px'}} />
              </div>
              <div style={{display: 'flex', flexDirection:'column', justifyContent:'space-evenly', width: '100%', textAlign:'center', marginLeft: '8px'}}>
                <div>{search.snippet.title}</div>
                <Button type="primary" onClick={ () => handleAdd(search.id.videoId, search.snippet.title, search.snippet.thumbnails.medium.url) } >ADD</Button>
              </div>
            </div>
          ))
        }
      </div>
    )
  }
}

@@ -46,30 +46,358 @@
 ort 
-%7B Button %7D from 'antd'
+styled from 'styled-components';%0Aimport %7B Button %7D from 'antd';%0A%0Aconst PlayItem = styled.div%60%0A  display: flex;%0A  marginTop: 10px;%0A%60;%0A%0Aconst ItemImage = styled.img%60%0A  width: 250px;%0A%60;%0A%0Aconst DescWrapper = styled.div%60%0A  display: flex;%0A  flex-direction: column;%0A  justify-content: space-evenly;%0A  width: 100%25;%0A  text-align: center;%0A  margin-left: 8px;%0A%60
 ;%0A%0Ae
@@ -644,35 +644,40 @@
  (%0A            %3C
-div
+PlayItem
  key=%7Bindex%7D sty
@@ -676,53 +676,8 @@
 dex%7D
- style=%7B%7Bdisplay: 'flex', marginTop: '10px'%7D%7D
  %3E%0A 
@@ -708,27 +708,33 @@
            %3C
-img
+ItemImage
  src=%7Blist.i
@@ -747,32 +747,8 @@
 t=%22%22
- style=%7B%7Bwidth:'250px'%7D%7D
  /%3E%0A
@@ -787,146 +787,19 @@
    %3C
-div style=%7B%7Bdisplay: 'flex', flexDirection:'column', justifyContent:'space-evenly', width: '100%25', textAlign:'center', marginLeft: '8px'%7D%7D
+DescWrapper
 %3E%0A  
@@ -938,35 +938,43 @@
               %3C/
-div
+DescWrapper
 %3E%0A            %3C/
@@ -965,35 +965,40 @@
 %3E%0A            %3C/
-div
+PlayItem
 %3E%0A          )):%0A
@@ -1053,19 +1053,24 @@
        %3C
-div
+PlayItem
  key=%7Bin
@@ -1077,53 +1077,8 @@
 dex%7D
- style=%7B%7Bdisplay: 'flex', marginTop: '10px'%7D%7D
  %3E%0A 
@@ -1113,19 +1113,25 @@
        %3C
-img
+ItemImage
  src=%7Bse
@@ -1174,33 +1174,40 @@
 alt=
-%22%22 style=%7B%7Bwidth:'250px'%7D
+%7Bsearch.snippet.title + ' Image'
 %7D /%3E
@@ -1247,146 +1247,19 @@
    %3C
-div style=%7B%7Bdisplay: 'flex', flexDirection:'column', justifyContent:'space-evenly', width: '100%25', textAlign:'center', marginLeft: '8px'%7D%7D
+DescWrapper
 %3E%0A  
@@ -1474,35 +1474,43 @@
               %3C/
-div
+DescWrapper
 %3E%0A            %3C/
@@ -1501,35 +1501,40 @@
 %3E%0A            %3C/
-div
+PlayItem
 %3E%0A          ))%0A 

Change inline style to styled-components