eldyvoon

/* shadow scroll */
  background: linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
    linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,
    radial-gradient(
        farthest-side at 50% 0,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      center top,
    radial-gradient(

eldyvoon

body {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

.container {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

eldyvoon

<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">theologian</th>
<th title="Field #2">century</th>
<th title="Field #3">title</th>
<th title="Field #4">year</th>
<th title="Field #5">average_rating</th>
<th title="Field #6">ratings_count</th>
</tr></thead>
<tbody><tr>
<td>C. S. Lewis</td>

eldyvoon

<table border="1" cellpadding="5" cellspacing="0" class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">century</th>
<th title="Field #2">theologian</th>
<th title="Field #3">goodreadsId</th>
<th title="Field #4">books/title</th>
<th title="Field #5">books/year</th>
<th title="Field #6">books/average_rating</th>
<th title="Field #7">books/ratings_count</th>
</tr></thead>
<tbody><tr>

eldyvoon

import useCounter from "./useCounter";

const CompOne = ({ initCounter }) => {
  const [count, increase] = useCounter(initCounter);

  return (
    <div>
      Count: {count}
      <button onClick={increase}>+</button>
    </div>

eldyvoon

import { useState } from "react";

const useCounter = initCount => {
  const [count, setCount] = useState(initCount);

  return [
    count,
    () => setCount(count => count + 1),
    () => setCount(count => count - 1)
  ];

eldyvoon

import Counter from "./renderPropCounter";

const CompOne = ({ initCounter }) => (
  <Counter initCounter={initCounter}>
    {({ count, increase }) => (
      <div>
        Count: {count}
        <button onClick={increase}>+</button>
      </div>
    )}

eldyvoon

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: props.initCounter };
  }

  increase = () => this.setState(prevState => ({ count: prevState.count + 1 }));
  decrease = () => this.setState(prevState => ({ count: prevState.count - 1 }));

  render() {

eldyvoon

import CounterHoc from "./CounterHOC";

const CompOne = ({ count, increase }) => (
  <div>
    Count: {count}
    <button onClick={increase}>+</button>
  </div>
);

export default CounterHoc(CompTwo);

eldyvoon

const CounterHOC = ComposedComponent =>
  class extends Component {
    constructor(props) {
      super(props);

      this.state = {
        count: props.initCounter
      };
    }