Pinned

1. React Insights: How to implement Acc... React Insights: How to implement Accordian

   1

   import React, {useState} from 'react';

   2

   import {

   3

       AccordianContent,

   4

       AccordianContainer, AccordianLabel, AccordianText

   5

   } from '../../styledComponents/Unit1';

2. Game component file Game component file

   1

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

   2

   import { JokeDisplayer } from "./JokeDisplayer";

   3

   import { JokeTypeDisplayer } from "./JokeTypeDisplayer";

   4

   import { Block, Container, Col } from "./common";

   5

3. React Insights: How to implement Tabs React Insights: How to implement Tabs

   1

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

   2

   import { ContentBody, Container, TabContainer, TabContentContainer, TabLabel } from '../styledComponents/Unit1';

   3

   4

   /*

   5

       config : [

4. Color Scheme Generator Color Scheme Generator

   1

   import chroma from "chroma-js";

   2

   3

   useEffect(() => {

   4

       setDarkenShades([

   5

         chroma(color).darken(),

5. React Insights: Implementing Multi s... React Insights: Implementing Multi section Forms

   1

   import React, {useState} from 'react';

   2

   import { Card, FormContentBody, EmptyBlock, Container, WidthComponent, 

   3

       FormElementContainer, FormElementLabel, FormElementComponent, FormInput, Headline } from '../styledComponents/Unit1';

   4

   import { Navbar, GitLink } from '../styledComponents/Unit2';

   5

   import Accordian from './sub-components/Accordian';

6. React Insights: How to trigger child... React Insights: How to trigger child click event using refs

   1

   const TutorialItem = (props) => {

   2

       const linkRef = useRef();

   3

       const itemClick = (e) => {

   4

           if (linkRef.current) {

   5

               linkRef.current.click();