components #react

small-component.js

// eslint-disable-next-line react/prop-types
const AvailableAddress = ({ address }) => {
	return (
		<AddressStatus address={address} status="isAvailable" />
	)
};

stateful-class.js

import React, { Component } from 'react';
import AddressForm from '../AddressForm/AddressForm';
import AddressStatus from '../../components/AddressStatus';
import AddressSuggestion from '../../components/AddressSuggestion';

class AvailabilityCheck extends Component {
    constructor (props) {
        super(props);
        this.state = {
            addressStatus: null,
        };
    }

    render () {
        return (
            <div className="availability-check background-color--bright">
                <h3>Verfügbarkeitsprüfung</h3>
                <AddressStatus address={this.state.address} status="isNotAvailable" />
                <AddressStatus address={this.state.address} status="isAvailable" />
                <AddressStatus address={this.state.address} status="isAmbiguous" />
                <AddressSuggestion addresses={this.state.addressSuggestions} />
                <AddressForm />
            </div>
        );
    }
}
export default AvailabilityCheck;

stateless.js

import PropTypes from 'prop-types'
import React from 'react'
import './Component.scss'
import classNames from 'classname'

const Component = ({ className }) => {
  const handleOnClick = () => {
    console.log('Hallo Welt');
  }

  return (
    <div className={classNames('comp-component', className)} onClick={handleOnClick}>
      Hallo Welt
    </div>
  )
}

Component.propTypes = {
  className: PropTypes.string,
}

export default Component