StyledDangerousBlockApp.js

import styled from "styled-components";
import dangerous from "dangerous";

import "./styles.css";

// const Block = ({ ...props }) => <div {...props} />;

class Block extends React.Component {
  // To check if static fields are hoised correctly
  static count = 10;
  static increaseCount = () => console.log(++Block.count);
  static decreaseCount = () => console.log(--Block.count);

  render() {
    return <div {...this.props} />;
  }
}

// const Dangerous = dangerous.div`
const Dangerous = dangerous(Block)`
  <h1>Who am I?</h1>
  <p>Last Name is "${props => props.lastName}"</p>
  <p>First Name is "${props => props.firstName}"</p>
  <a href="javascript:alert('hi');">Show Alert</a>
`;

const StyledDangerous = styled(Dangerous)`
  background-color: papayawhip;
  padding: 2em 0;
`;

const StyledBlock = styled(Block)`
  background-color: hotpink;
  padding: 2em 0;
`;

const DangerousStyled = dangerous(StyledBlock)`
  <h1>Alter Ego</h1>
  <p>Click link below to find out who my alter ego is</p>
  <a href="javascript:alert('${props => props.name}');">Show Aleter Ego Name</a>
`;

function App() {
  return (
    <div className="App">
      <section>
        <StyledDangerous firstName="Sung" lastName="Kim" />
        <DangerousStyled name="dance2die" />
      </section>
    </div>
  );
}