kylebuildsstuff

// reducer.js
export const initialState = {
  authenticated: false,
  authenticating: false,
};

export const loginReducer = (
  state = initialState,
  action
) => {

kylebuildsstuff

import React from 'react';

export const SomeComponent = () => {
  return (
    <div className="flex justify-center items-center">
      what
    </div>
  );
}

kylebuildsstuff

.someClassName {
 display: flex;
 justify-content: center;
 align-items: center;
}

kylebuildsstuff

export const SomeComponent = () => {
  return (
    <div className="someClass">
      what
    </div>
  );
}

kylebuildsstuff

...
<form
  className="w-80"
  onSubmit={handleSubmit(onSubmit)}
>
...

kylebuildsstuff

export const FormContainer = props => {
 const submitForm = (formValues) => {
   console.log('submitting Form: ', formValues);
 }

 return (
   <FormComponent
     formValues={props.formValues}
     change={props.change}
     onSubmit={submitForm}

kylebuildsstuff

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

kylebuildsstuff

{
  "name": "redux-form-v7-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "moment": "^2.18.1",
    "react": "^15.6.1",
    "react-addons-shallow-compare": "^15.6.0",
    "react-dates": "^12.6.0",
    "react-dom": "^15.6.1",

kylebuildsstuff

import React from 'react';

export const Checkbox = props => {
  return (
    <div className="flex items-center mv4 w-100">
      <input
        {...props.input}
        className="mr2"
        type="checkbox"
        checked={props.input.value}

kylebuildsstuff

<Field
  name="spiceLevel"
  label="Spice Level"
  component={Radio}
  options={{
    mild: 'Mild',
    medium: 'Medium',
    hot: 'hot'
  }}
/>