import React from 'react'

const CaptionList = props => {
  const {togglePopup, captions} = props
  return (
    <tbody>
      {Object.keys(captions).map(key => {
        return captions[key].map(caption => {
          return (
            <tr key = {key+caption.text}
              onClick={() => {
                togglePopup({ nick: caption.nick, text: caption.text })
                console.log({ nick: caption.nick, text: caption.text })
              }
              }
            >
              <td>{caption.nick}</td>
              <td>{caption.text}</td>
            </tr>
          )
        })
      })}
    </tbody>
  )
}

export default CaptionList