How to use react-foundation - 4 common examples

return (
      <div className='search-container'>
        <Row isColumn>
          <div className='input-group search-bar-container'>
            <input
              type='text'
              className='input-group-field search-bar-input'
              placeholder='headphones, school laptop, toaster'
              value={this.state.query}
              onKeyDown={this.handleKeyDown.bind(this)}
              onChange={e => this.setState({ query: e.target.value })}
            />
            <div className='input-group-button'>
              <Button
                type='submit'
                color={Colors.PRIMARY}
                onClick={() => this.performSearch()}
              >
                Search
              </Button>
            </div>
          </div>
        </Row>
        <Row>
          {this.props.showFilters &&
            <Column small={5} medium={6}>
              <label>Only Amazon Fulfilled
                <Switch
                  input={{
                    type: InputTypes.CHECKBOX,
                    checked: this.state.onlyAmazon === 'true',
                    onChange: (e) => this.handleOnlyAmazonChange(e.target.checked)

const ProductLink = ({ slug, children }) => (
  <Link to={{ query: { query: slug } }}>
    <Button
      color={Colors.PRIMARY}
      onClick={() => {
        if (window.ga) {
          window.ga('send', 'event', {
            eventCategory: 'recommended',
            eventAction: 'click',
            eventLabel: slug
          })
        }
      }}
      isExpanded
    >
      {children}
    </Button>
  </Link>
)

};

    return (
      <div className="login">
        <h2 className="login__title">React starter</h2>
        <div className="login__box">
          <form onSubmit={handleSubmit}>
            <label>
              Email
              <input type="email" ref="email" placeholder="name@example.com" required/>
            </label>
            <label>
              Password
              <input type="password" ref="password" placeholder="******" required/>
            </label>
            <Button className="login__submit" type="submit" color={Colors.PRIMARY} isExpanded>Log in</Button>
          </form>
        </div>
      </div>
    );
  }
}

type='submit'
                color={Colors.PRIMARY}
                onClick={() => this.performSearch()}
              >
                Search
              </Button>
            </div>
          </div>
        </Row>
        <Row>
          {this.props.showFilters &&
            <Column small={5} medium={6}>
              <label>Only Amazon Fulfilled
                <Switch
                  input={{
                    type: InputTypes.CHECKBOX,
                    checked: this.state.onlyAmazon === 'true',
                    onChange: (e) => this.handleOnlyAmazonChange(e.target.checked)
                  }}
                />
              </label>
            </Column>
          }
          {this.props.showFilters &&
            <Column small={7} medium={6}>
              <label>Department
                <select
                  value={this.state.index || 'All'}
                  onChange={e => this.handleIndexChange(e.target.value)}
                >
                  <option value='All'>All Depts.</option>
                  <option value='Appliances'>Appliances</option>