JSFiddle - React, Tailwind, and code Playground

by prozoroff

HTML

<div id="app"></div>

JavaScript

const App = () => {
  console.log("Render App");
  const [users, setUsers] = React.useState([
    { id: 'alice', name: 'Alice' },
    { id: 'bobo', name: 'Bob' },
  ]);
 
  const [text, setText] = React.useState('');
 
  const handleText = (event) => {
    setText(event.target.value);
  };
 
  const handleAddUser = () => {
    setUsers(users.concat({ id: text, name: text }));
  };
 
  return (
    <div>
      <input type="text" value={text} onChange={handleText} />
      <button type="button" onClick={handleAddUser}>
        Add User
      </button>
 
      <List list={users} />
    </div>
  );
};
 
const List = React.memo(({ list }) => {
	console.log("Render List");
  return (
    <ul>
      {list.map((item) => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
});
 
const ListItem = React.memo(({ item }) => {
  console.log("Render Item: " + item.name);
  return <li>{item.name}</li>;
});
 
ReactDOM.render(<App />, document.querySelector("#app"))