szaranger

import React from 'react';
import cx from 'classnames';
import '../../../styles/menu-toggle.less';

export const Collapsed = () => {
    return (
        <svg viewBox="0 0 20 20" className={styles.default}>
            <path className={styles.collapsed.path} d="M9,6h2v8H9V6z"/>
            <path className={styles.collapsed.path} d="M6,11V9h8v2H6z"/>
        </svg>

szaranger

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

szaranger

function Buttons({ children }) {
  const newProps = {
    className: "highlight",
    onClick: () => console.log("Clicked!")
  };
  return (
    <>
      {children.map((child, index) =>
        React.cloneElement(child, { ...newProps, key: index })
      )}

szaranger

function Buttons({ children }) {
  const newProps = {
    className: "highlight",
    onClick: () => console.log("Clicked!")
  };
  return (
    <>
      {children.map((child, index) =>
        React.isValidElement(child) &&
        React.cloneElement(child, { ...newProps, key: index })

szaranger

function Buttons(props) {
  return props.render();
}
export default function App() {
  return (
      <Buttons
        render={() => (
          <>
            <button>Hello</button>
            <button>World</button>

szaranger

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

function Character({ id }) {
  /** Move this! */
  // if (!id) {
  //  return "Please select a game to fetch";
  // }
  const [character, setCharacter] = useState({
    name: "",
    description: ""

szaranger

class MyComponent extends React.Component {
  constructor() {
    // initialize component instance
  }
  componentDidMount() {
    // The component is first added to the page
  }
  componentDidUpdate(prevProps, prevState) {
    // The component is updated on the page
  }

szaranger

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Run once after DOMContentEvent loads
  }, []);
  
  useEffect(() => {
    // Synchronize the state with the state of this component.
    return function cleanup() {

szaranger

import React, { useCallback } from 'react';

function Count() {
  const [count, setCount] = useState(0);
  
  const increase = useCallback(() => {
    /** Avoid */
    // setCount(count + 1);
    /** Use a callback instead */
    setCount(count => count + 1);

szaranger

function ParentComponent() {
  function handleClick() {
    console.log('clicked inside child component');
  }
  
  return <ChildComponent onClick={handleClick} />
}