React Hook Demo with Form Handling

app.js

import { Route, Switch } from 'react-router-dom';

import HooksDemo from './hooksDemo';
import React from 'react';
import { withLDProvider } from 'launchdarkly-react-client-sdk';

const App = () => (
  <div>
    <main>
      <Switch>
        <Route path="/" component={HooksDemo} />
      </Switch>
    </main>
  </div>
);

// Set clientSideID to your own Client-side ID. You can find this in
// your LaunchDarkly portal under Account settings / Projects
export default withLDProvider({ clientSideID: '5baa7d07a3050e21323b735d' })(App);

hooksDemo.js

import React, {useState} from 'react'
import { useFlags, useLDClient } from 'launchdarkly-react-client-sdk';

import styled from 'styled-components';

const Root = styled.div`
  color: #001b44;
`;
const Heading = styled.h1`
  color: #00449e;
`;
const ListItem = styled.li`
  margin-top: 10px;
`;
const FlagDisplay = styled.div`
  font-size: 20px;
  font-weight: bold;
`;
const FlagOn = styled.span`
  color: #96bf01;
`;
const HooksDemo = () => {
  const { devTestFlag } = useFlags();
  const ldClient = useLDClient();
  const [email, setEmail] = useState('');

  const onLoginSuccesful = () => ldClient.identify(
    { 
      key: email, 
      email: email
    }
  )

  return (
    <Root>
      <Heading>Hooks Demo</Heading>
      <div>
        This is the equivalent demo app using hooks. To run this example:
        <ul>
          <ListItem>
            In app.js, set clientSideID to your own Client-side ID. You can find this in your ld portal under Account
            settings / Projects.
          </ListItem>
          <ListItem>
            Create a flag called dev-test-flag in your project. Make sure you make it available for the client side js
            sdk.
          </ListItem>
          <ListItem>Turn the flag on and off to see this app respond without a browser refresh.</ListItem>
        </ul>
        <input type="text" placeholder="Email" onChange={e => setEmail(e.target.value)} />
        <button onClick={onLoginSuccesful}>Login</button>
      </div>
      <FlagDisplay>{devTestFlag ? <FlagOn>Flag on</FlagOn> : <span>Flag off</span>}</FlagDisplay>
    </Root>
  );
};

export default HooksDemo;