jogilvyt

import React from "react";

const ToDoList = ({ items }) => {
  return (
    <div>
      <ul>
        {items.length
          ? items.map((item) => <li key={item.id}>{item.text}</li>)
          : null}
      </ul>

jogilvyt

import React from "react";

const ToDoList = ({ items }) => {
  return (
    <div>
      <ul>
        {items.length && items.map(item => <li key={item.id}>{item.text}</li>)}
      </ul>
    </div>
  );

jogilvyt

import React from "react";

const Toggle = () => {
  const [isActive, setIsActive] = React.useState(false);

  return (
    <button onClick={() => setIsActive(!isActive)}>
      {isActive ? "Active" : "Inactive"}
    </button>
  );

jogilvyt

import React from "react";

const Toggle = () => {
  const [isActive, setIsActive] = React.useState(false);

  const toggleActiveState = activeState => () => {
    setIsActive(activeState);
  };

  return (

jogilvyt

import React from "react";

const Toggle = () => {
  const [isActive, setIsActive] = React.useState(false);

  const toggleActiveState = activeState => () => {
    setIsActive(activeState);
  };

  return (

jogilvyt

import { useState } from "react";

import SelectList from "./SelectList";

const options = ["Apples", "Pears", "Lemons", "Limes"];

function App() {
  const [selectedValue, setSelectedValue] = useState(options[0]);

  return (

jogilvyt

import { createContext, useState, useContext, useMemo } from "react";

const SelectListContext = createContext();

const SelectList = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const contextValue = useMemo(
    () => ({
      isOpen,

jogilvyt

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div className="App">
      <h1>Try opening the modal</h1>
      <button onClick={() => setIsModalOpen(true)}>Open the modal</button>

      {isModalOpen ? (
        <Modal>

jogilvyt

const Modal = ({ children }) => {
  return (
    <div className="Modal">
      <div className="Modal-content">{children}</div>
    </div>
  );
};

const ModalHeader = ({ children }) => {
  return (

jogilvyt

const Modal = ({ header, body, onClose, onConfirm, confirmButtonText }) => {
  const renderBody = () => {
    if (typeof body === "string") {
      return <p>body</p>;
    }

    return body;
  };

  return (