dandelionadia

class MyComponent extends React.Components {
	constructor () {
		this.state = {
			a: 0,
			b: 'foo'
		}
	}

	handerClick = () => {
		this.setState({

dandelionadia

import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import { Box } from 'atomic-layout'

const StyledInput = styled.input`
  background-color: #282828;
  color: #fff;
  width: 100%;
  padding: 16px;
  border: none;

dandelionadia

import React, { useState, useRef } from 'react'
import debounce from 'lodash.debounce'

const Search = () => {
  // state text which was written in the input
  const [value, setValue] = useState('')

  // using "useRef" so that React doesn't create
  // debounced function on each render (after state update).
  const doSearch = useRef(

dandelionadia

```css
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;

dandelionadia

const Toggle = () => {
  const [isToggle, setIsToggle] = React.useState(true)
  
  const handleClick = () => {
    setIsToggle(!isToggle)
  }
  
  return (
    <button onClick={handleClick}>{isToggle ? 'On' : 'Off'}</button>
  )

dandelionadia

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 350px;
  padding: 0.5rem 1rem;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 4px;

dandelionadia

export interface ProductData {
  id: string
  title: string
  description: string
  rating: number
  price: number
  images: string[]
  relatedProducts: string[]
  shopAttributes: ProductAttributes[]
  reviews: ProductReview[]

dandelionadia

 useEffect(() => {
    console.log("[Cockpit.js] useEffect");
    const timer = setTimeout(() => {
      alert("foo time out");
    }, 1000);
    return () => {
      clearTimeout(timer);
    };
  }, []);

dandelionadia

state = {
    persons: [
      { id: 'asfa1', name: 'Max', age: 28 },
      { id: 'vasdf1', name: 'Manu', age: 29 },
      { id: 'asdf11', name: 'Stephanie', age: 26 }
    ],
    otherState: 'some other value',
    showPersons: false,
    showCockpit: true,
    changeCounter: 0

dandelionadia

import React, { useEffect, useRef } from "react";

interface CockpitProps {
  onClick: any;
  persons: any[];
  personsLength: any;
}

export const Cockpit: React.FC<CockpitProps> = React.memo(props => {
  const toggleBtnRef = useRef<HTMLButtonElement>(null);