dandelionadia

import React, { useEffect, useRef, useContext } from "react";
import { AuthContext } from "../../context/auth-context";

export const Cockpit = (props) => {
  const authContext = useContext(AuthContext);

  console.log(authContext.authenticated);

  return (
    <>

dandelionadia

class Person extends Component {
	constructor(props) {
		super(props);
		this.inputElementRef = React.creatRef();
	}

	componentDidMount() {
		this.inputElementRef.current.focus();
	}

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);

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

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

dandelionadia

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

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

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

dandelionadia

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

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(