import React, { useState } from 'react';
import styled from 'styled-components';
import sfc from 'jsx-sfc.macro';

const App = sfc({
  Component() {
    const [user, setUser] = useState('foo');
    return { user, onClick: () => setUser('bar') };
  },

  render: ({ data, styles: { Wrapper } }) => (
    <Wrapper>
      <button onClick={data.onClick}>{data.user}</button>
    </Wrapper>
  ),

  styles: {
    Wrapper: styled.div`
      background-color: #fff;
    `
  }
});