React - Todo

by Fulvio Cezar Canducci Dias

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<div id="app" class="container"></div>

React

function App() {
	const [value, setValue] = React.useState('');
	const [todos, setTodos] = React.useState([]);
  const handleValue = (e) => {
  	setValue(e.target.value);
  }
  const handleTodoSubmit = (e) => {  
  	e.preventDefault();
  	if (value.length > 0) {
  		setTodos([...todos, {name: value}]);
      setValue('');
    }
  }
  return (
  	<React.Fragment>
      <div className="">
         {todos.length === 0 && 'Nenhum item adicionado...'}
         {todos.length > 0 && (todos.length + ' item(ns) adicionado(s)')}
      </div>
      <form onSubmit={handleTodoSubmit}>
        <input type="text" value={value} onChange={handleValue} 
          autoFocus={true} className="form-control"/>
        <button className="btn btn-default btn-block" style={{marginTop:'5px'}}>
          Adicionar
        </button>
      </form>
      <div style={{marginTop:'10px'}}>       
        <ul className="list-group">          
          {todos && 
          	todos.length > 0 && 
          	todos.map((t, i) => (<li className="list-group-item" key={i}>{t.name}</li>))}
        </ul>
      </div>
    </React.Fragment>
  )
}

ReactDOM.render(<App />, document.querySelector("#app"))