pushkar100

const getLogMetaData = () => ({
  source: 'www'
});

const withLogger = (ComposedComponent) =>
  class extends React.Component {
    componentDidMount() {
      this.setState({
        meta: getLogMetaData()
      });

pushkar100

const getMessages = () => [
  { id: 100, text: "Hey", author: "Ram" },
  { id: 101, text: "Hello!", author: "Dennis" },
  { id: 102, text: "How is it going?", author: "Ram" }
];

const MessagesPresenter = ({ messages }) => {
  return (
    <ul>
      {messages.map(({ id, text, author }) => (

pushkar100

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

const getMessages = () => [
  { id: 100, text: "Hey", author: "Ram" },
  { id: 101, text: "Hello!", author: "Dennis" },
  { id: 102, text: "How is it going?", author: "Ram" }
];

const useMessages = () => {
  const [messages, setMessages] = useState([]);

pushkar100

<Menu hideButtons>
  {(hideButtons) => (
      <>
        <MenuButton display={!hideButtons} text="Exit" action={() => {...}} />
        <MenuButton display={!hideButtons} text="Settings" action={() => {...}} />
        <MenuItem text="News" />
        <MenuItem text="Serials" />
        <MenuItem text="Sports" />
      </>
  )}

pushkar100

import React from "react";

export const MenuContext = React.createContext({ hideButtons: false });

const Menu = ({ children, hideButtons }) => {
  return (
    <MenuContext.Provider value={{ hideButtons }}>
      {children}
    </MenuContext.Provider>
  );

pushkar100

import React, { useContext } from "react";
import { MenuContext } from "./Menu";

const MenuButton = ({ text, action }) => {
  const { hideButtons } = useContext(MenuContext);

  if (hideButtons) {
    return null;
  }

pushkar100

import React from "react";

const MenuItem = ({ text }) => <div key={text}>{text}</div>;

export default MenuItem;

pushkar100

import Menu from "./Menu";
import MenuButton from "./MenuButton";
import MenuItem from "./MenuItem";

export default () => (
  <Menu hideButtons>
    <MenuButton text="Exit" action={() => console.log("Exiting")} />
    <MenuButton text="Settings" action={() => console.log("settings")} />
    <MenuItem text="News" />
    <MenuItem text="Serials" />

pushkar100

const Button = ({ text, onClick, tabIndex, ariaDisabled }) => {
  return (
    <button
      onClick={onClick}
      tabIndex={tabIndex}
      role="button"
      aria-disabled={ariaDisabled}
    >
      {text}
    </button>

pushkar100

const buttonAriaPropCollection = {
  tabIndex: 0,
  role: "button",
  "aria-disabled": false
};

const Button = ({ text, onClick, tabIndex, role, 'aria-disabled': ariaDisabled }) => {
  return (
    <button onClick={onClick} tabIndex={tabIndex} role={role} aria-disabled={ariaDisabled}>
      {text}