JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<div id="root"></div>

CSS

html {
  font-family: sans-serif;
  font-size: 2em;
}

li {
  font-weight: bold;
  cursor: pointer;
  color: silver;
}

li:hover {
  color: black;
}

li:active {
  color: red;
}

React

function App () {
    function onFruitClick(fruit) {
        console.log(`Vous avez cliqué sur ${fruit}`);
    }
    
    return (
        <ul>
            <Fruit onSelectFruit={onFruitClick}>Pêche</Fruit>
            <Fruit onSelectFruit={onFruitClick}>Banane</Fruit>
            <Fruit onSelectFruit={onFruitClick}>Leetchi</Fruit>
        </ul>
    );
}

// ===================
// Composant <Fruit />
// ===================

function Fruit(props) {
  function onClick(event) {
    event.preventDefault();
    const fruit = event.target.textContent;
    props.onSelectFruit(fruit);
  }
  return (<li onClick={onClick}>{props.children}</li>);
}



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