Code DRY

v-clean-code-06.jsx

// Code DRY

// Dirty Code
export default App = (props) => {

    return (
        <div className="my-app">
            <div className="custom-button">
                <span className="icon icon-user"/>
                <span className="content">Add New Member</span>
            </div>
            <div className="custom-button">
                <span className="icon icon-report"/>
                <span className="content">Report User</span>
            </div>
            <div className="custom-button">
                <span className="icon icon-times"/>
                <span className="content">Close Chat</span>
            </div>
            <div className="custom-button">
                <span className="icon icon-share"/>
                <span className="content">Share Chat Link</span>
            </div>
        </div>
    )
}

// Clean Code
// You must create your custom button component and use it where you want
const CustomButton = ({iconName, content = '', children}) => {
    return (
        <div className="custom-button">
            {iconName &&
            <span className={`icon icon-${iconName}`}/>}
            {content &&
            <span className="content">{content}</span>}

            {/* render children of this component if content be empty/null */}
            {!content && children}
        </div>
    )
}

export default App = (props) => {

    return (
        <div className="my-app">

            <CustomButton content="Add New Member" iconName="user"/>
            <CustomButton content="Report User" iconName="report"/>
            <CustomButton content="Close Chat" iconName="report"/>
            <CustomButton>
               <span className="icon icon-share"/>
               <span className="content">Share Chat Link</span>
            </CustomButton>
            
        </div>
    )
}