JSFiddle - React, Tailwind, and code Playground

by afoone

HTML

<div id='root'>

</div>

React

const {useState, useEffect} = React;


async function getGenres() {

	var promise = new Promise(function(resolve, reject) {
     window.setTimeout(function() {
       resolve( ['genre1', 'genre2']);
     });
   });
   return promise;
   
}

const Screen = () => {

	const [genres, setGenres] = useState([])


  useEffect(
  	 () => {
    	getGenres().then(
      	res => setGenres(res)
      )
    }, [getGenres]
  )
  
  console.log('genres', genres)
  
  return (
    <ul>
      {
      genres.map(
      	i => <li>{i}</li>
      )
      }
    </ul>
  );
}


const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Screen/>)