Elep

import React, { useEffect, useState } from "react";
// import styled from "styled-components";

// const Wrap = styled.div`
//   position: relative;
//   background: green;
//   color: white;
//   padding: 1rem;
//   margin-bottom: 5px;
//   opacity: ${props => (props.show ? "1" : "0")};
//   transform: translateX(${props => (props.show ? "-20px" : "120px")});
//   transition: all 300ms ease-in-out;
// `;

const styledComp = (show, text) => {
    return (
        <div
            style={{
                position: 'relative',
                background: 'green',
                color: 'white',
                padding: '1rem',
                marginBottom: '5px',
                opacity: `${show ? "1" : "0"}`,
                transform: `translateX(${show ? "-20px" : "120px"})`,
                transition: 'all 300ms ease-in-out'
            }}
        >
        {text}
        </div>
    )
}

const Alert = props => {
  const [show, setShow] = useState(false);

useEffect(() => {
    console.log(show);
    setShow(true);
  });

return styledComp(show, props.children)
};

export default Alert;