ChatBubble.withComposition.js

import React from 'react';

export default ChatBubble = props => {
    return (
        <div className='wrapper'>
            <Header {...props}/>
            <div className='body'>
              {props.children}
            </div>
            <Footer {...props}/>
        </div>
    );
};

const Header = props => (
    <div className='header'>
        <div className='sentBy'>
            {props.sentBy}
        </div>
        <div className='avatar'>
            <image src={props.avatar}/>
        </div>
    </div>
);

const Footer = props => (
    <div className='footer'>
        <div className='time'>
            <icon name='clock'/> 
            {props.time}
        </div>
    </div>
);