test.js

test.js

import React, { Component } from "react";
import "./App.css";
import {
  Card,
  CardText,
  CardBody,
  CardTitle,
  Button,
  Form,
  FormGroup,
  Input,
  Container,
  Row,
  Col
} from "reactstrap";

let reviews = [{ name: "", comment: "", editMode: true }];

class Item extends Component {
  constructor(props) {
    super();

    this.editItem = this.editItem.bind(this);
    this.onChange = this.onChange.bind(this);

    this.state = {
      isInEditMode: false,
      name: (this.props && this.props.name) || "",
      comment: (this.props && this.props.comment) || ""
    };
  }

  editItem() {
    this.setState(prevState => ({
      isInEditMode: true
    }));
  }

  onChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    const isEdit = this.state.isInEditMode || this.props.isInEditMode;

    return (
      <div>
        <Card>
          <CardBody>
            {!this.state.isInEditMode && !this.props.isInEditMode && (
              <div>
                <CardTitle>{this.props.name}</CardTitle>
                <CardText>{this.props.comment}</CardText>
                <Button
                  color="danger"
                  onClick={() => this.props.deleteItem(this.props.index)}
                >
                  Delete
                </Button>
                <Button color="info" onClick={this.editItem}>
                  Edit
                </Button>
              </div>
            )}
            {console.log(this.state.isInEditMode, this.props.isInEditMode)}

            {isEdit && (
              <div>
                <Form>
                  <FormGroup>
                    <Input
                      type="text"
                      name="name"
                      id="name"
                      placeholder="Your Name"
                      value={this.state.name}
                      onChange={this.onChange}
                    />
                  </FormGroup>
                  <FormGroup>
                    <Input
                      type="textarea"
                      name="comment"
                      id="comment"
                      placeholder="Your Comment"
                      value={this.state.comment}
                      onChange={this.onChange}
                    />
                  </FormGroup>
                  <Button
                    onClick={() => this.props.addItem(this.state)}
                    disabled={!this.state.name || !this.state.comment}
                  >
                    Add
                  </Button>
                </Form>
              </div>
            )}
          </CardBody>
        </Card>
        <br />
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super();

    this.deleteItem = this.deleteItem.bind(this);
    this.addItem = this.addItem.bind(this);

    this.state = {
      reviews
    };
  }

  deleteItem(index) {
    reviews.splice(index, 1);
    this.setState(reviews);
  }

  addItem(data) {
    const name = data.name;
    const comment = data.comment;
    reviews.unshift({ name, comment, editMode: false });
    this.setState(reviews);
  }

  render() {
    const noComments = this.state.reviews.length === 1;

    return (
      <div className="App">
        <Container>
          <Row>
            <Col xs="7" className={"mx-auto"}>
              <br />
              <h1>User Reviews</h1>
              <br />
              {this.state.reviews.map((item, index) => (
                <Item
                  name={item.name}
                  comment={item.comment}
                  deleteItem={this.deleteItem}
                  addItem={this.addItem}
                  key={item.name}
                  noComments={noComments}
                  isInEditMode={index === this.state.reviews.length - 1}
                  index={index}
                />
              ))}
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default App;