workshop-reactjs

------------App----------------------------
import React, { Component } from "react";
import TodoInput from "./components/TodoInput";
import TodoList from "./components/TodoList";

export default class App extends Component {
  state={
    data:[
      {id:1,nama:'paijo'},
      {id:2,nama:'paimen'},
    ],
    activeItem:{
      nama:"",
      complated:false
    },
    editItem:false
  }
  handleChange=(e)=>{
    let {name,value}=e.target;

    if(e.target.type==="checkbox"){
      value=e.target.checked;
    }

    const activeItem={...this.state.activeItem, [name]:value};
    this.setState({activeItem});
  }
  handleSubmit=(item)=>{
    console.log('item',item)
    console.log(this.state.activeItem)
  }
  handleEdit = (item) => {
    console.log(item)
    this.setState({ activeItem: item, editItem: true });
  };
  handleDelete = (item) => {
    alert("Delete :: " + JSON.stringify(item));
  };
  render() {
    return (
      <div className="container">
        <h1 className="text-uppercase text-center my-2">Todo App</h1>
        <div className="row">
          <div className="col-8 col-md-6 mx-auto mt-2">
            <TodoInput
              activeItem={this.state.activeItem}
              editItem={this.state.editItem}
              handleChange={this.handleChange}
              handleSubmit={this.handleSubmit}
            />
            <TodoList
              data={this.state.data}
              handleEdit={this.handleEdit}
              handleDelete={this.handleDelete}
            />
          </div>
        </div>
      </div>
    );
  }
}

-------------------TodoList------------------
import React, { Component } from "react";
import TodoItem from "./TodoItem";

export default class TodoList extends Component {
  render() {
    const {data, handleEdit, handleDelete}=this.props;
    return (
      <ul className="list-group my-2">
        {data.map((item)=>{
            return (
                <TodoItem
                    items={item}
                    handleEdit={handleEdit}
                    handleDelete={handleDelete}
                />
            )
        })}
      </ul>
    );
  }
}

--------------------TodoItem------------------
import React, { Component } from "react";

export default class TodoItem extends Component {
  render() {
    const {items, handleEdit, handleDelete}=this.props;
    return (
      <li key={items.id}
      className="list-group-item d-flex justify-content-between align-items-center">
        <span className="todo-title mr-2">{items.nama}</span>
        <span>
          <button
            className="btn btn-secondary mr-2"
            onClick={() => handleEdit(items)}
          >
            Edit
          </button>
          <button className="btn btn-danger" onClick={() => handleDelete(items)}>
            Delete
          </button>
        </span>
      </li>
    );
  }
}

---------------------TodoInput----------------------
import React, { Component } from "react";

export default class TodoInput extends Component {
  render() {
    const {activeItem, editItem, handleChange, handleSubmit}=this.props
    return (
      <div className="card card-body">
        <form action="">
          <div className="form-group">
            <label>Title</label>
            <input
              type="text"
              name="title"
              className="form-control text-capitalize"
              placeholder="add todo item"
              value={activeItem.nama}
              onChange={handleChange}
            />
          </div>
          <div className="form-group form-check">
            <input
              type="checkbox"
              name="completed"
              className="form-check-input"
              value={activeItem.complated}
              onChange={handleChange}
            />
            <label className="form-check-label">Completed</label>
          </div>
          <button
            type="submit"
            className={
              editItem ? "btn btn-success mt-3" : "btn btn-primary mt-3"
            }
            onClick={() => handleSubmit(activeItem)}
          >
            {editItem ? "Edit" : "Add"}
          </button>
        </form>
      </div>
    );
  }
}