jfbrennan

// A version of https://www.esveo.com/en/blog/O5/ using native dialog API and no extra abstractions.
function App() {
  const [users, setUsers] = useState([
    { id: 1, name: "peter" },
    { id: 2, name: "tony" },
  ]);
  const [userToBeDeleted, setUserToBeDeleted] = useState(null);
  const dialog = useRef();

  function handleDeleteClick(user) {

jfbrennan

<my-todos>
  <p>Todo count: {state.todos.length}</p>
  <input ref="newTodo" type="text">
  <button onclick="{add}">Add</button>
  <ul if="{state.todos.length}">
    <li each="{(todo, i) in state.todos}" key="{i}">{todo} <button onclick="{e => remove(i)}">Remove</button></li>
  </ul>

  <script>
    export default {

jfbrennan

<template>
  <p>Todo count: {{todos.length}}</p>
  <input ref="newTodo" type="text">
  <button v-on:click="add">Add</button>
  <ul v-if="todos.length">
    <li v-for="(todo, i) of todos" :key="i">{{todo}} <button v-on:click="remove(i)">Remove</button></li>
  </ul>
</template>

<script>

jfbrennan

const num = 123
let digits

// Option A
digits = num.toString().split('').map(Number)
console.log(digits) // [1, 2, 3]

// Option B
digits = Array.from(String(num), Number)
console.log(digits) // [1, 2, 3]

jfbrennan

import React, {Component} from 'react'
import PropTypes from 'prop-types'

class ReactAlert extends Component {
    static defaultProps = {
        icon: null,
        msg: '',
        type: 'info',
        autodismiss: 0,
        onRemoveAlert: () => {}