JSFiddle - React, Tailwind, and code Playground

by Christiaan Westerbeek

HTML

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

const { useState, useEffect } = React;

let store = [];

function App() {
  console.log(`------------------`);
  console.log(`App function called for the ${store.length + 1}th time`);

  const [value, setValue] = useState();
  useEffect(() => {
  	console.log('Running the EFFECT after render!')
  })
  store.push(`value: ${value}`)

  setTimeout(() => {
    console.log(
      `calling setValue with 1 and current value = ${
      value
      }`);
    setValue(1);
  }, 2000);

  console.log(`returning with ${store.length} number of items in store, but check how many items you see in the DOM right now!`);
  console.log(`^^^^^^^^^^^^^^^^^^`);
  
  return store.map((value, index) => (
    <div key={index}>
      With function call {index}, {value}
    </div>
  ));
}

ReactDOM.render(<App />, document.getElementById('container'));