diff --git a/client/modules/Post/components/PostListItem/Comment.js b/client/modules/Post/components/PostListItem/Comment.js
new file mode 100644
index 000000000..40e911fd4
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/Comment.js
@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+ margin-top: 10px;
+ padding: 0 15px;
+ background: #edf6f7;
+`;
+
+const Button = styled.button`
+ cursor: pointer;
+ font-size: 12px;
+ width: 5vw;
+ height: 20px;
+ border-radius: 10px;
+ background: #e1f7fa;
+ outline: none;
+ margin-top: 10px;
+`;
+
+function Comment(props) {
+ const [showEdit, setShowEdit] = useState(false);
+ const [editText, setEditText] = useState("");
+ useEffect(() => {
+ setEditText(props.text);
+ }, [props.text]);
+
+ const testFunction = e => {
+ props.updateComment(props.id, editText);
+ setEditText("");
+ setShowEdit(!showEdit);
+ e.preventDefault;
+ };
+ return (
+
+ {props.name}
+ {!showEdit ? (
+ {props.text}
+ ) : (
+
+ )}
+
+
+
+
+ );
+}
+
+export default Comment;
diff --git a/client/modules/Post/components/PostListItem/CommentList.js b/client/modules/Post/components/PostListItem/CommentList.js
new file mode 100644
index 000000000..c91d5d967
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/CommentList.js
@@ -0,0 +1,21 @@
+import React from "react";
+import Comment from "./Comment";
+
+function CommentList(props) {
+ return (
+
+ {props.arrComment.map(val => (
+
+ ))}
+
+ );
+}
+
+export default CommentList;
diff --git a/client/modules/Post/components/PostListItem/Input.js b/client/modules/Post/components/PostListItem/Input.js
new file mode 100644
index 000000000..f5f7308a5
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/Input.js
@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+const Form = styled.form`
+ display: flex;
+ flex-direction: column;
+`;
+
+const Field = styled.input`
+ margin-top: 5px;
+ width: 30vw;
+ font-size: 18px;
+ height: 30px;
+ padding: 0.5rem;
+ outline: none;
+ border: none;
+ border-radius: 10px;
+ background: #e1f7fa;
+ border-bottom: 1px solid #f5feff;
+`;
+
+const Button = styled.button`
+ cursor: pointer;
+ font-size: 15px;
+ width: 10vw;
+ height: 25px;
+ border-radius: 10px;
+ background: #e1f7fa;
+ outline: none;
+ margin-top: 10px;
+`;
+
+function Input(props) {
+ const [name, setName] = useState("");
+ const [comment, setComment] = useState("");
+
+ return (
+
+ );
+}
+
+export default Input;
diff --git a/client/modules/Post/components/PostListItem/PostListItem.js b/client/modules/Post/components/PostListItem/PostListItem.js
index 2925e2199..6af896ebe 100644
--- a/client/modules/Post/components/PostListItem/PostListItem.js
+++ b/client/modules/Post/components/PostListItem/PostListItem.js
@@ -1,22 +1,73 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router';
-import { FormattedMessage } from 'react-intl';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router";
+import { FormattedMessage } from "react-intl";
+import Input from "./Input";
+import CommentList from "./CommentList";
+import update from "react-addons-update";
// Import Style
-import styles from './PostListItem.css';
+import styles from "./PostListItem.css";
function PostListItem(props) {
+ const [comment, setComment] = useState([]);
+ const [show, setShow] = useState(false);
+
+ const getComment = (a, b) => {
+ const id = Math.round(Math.random() * 10000);
+ const obj = { name: a, text: b, id };
+
+ setComment([...comment, obj]);
+ setShow(!show);
+ };
+
+ const updateComment = (id, text) => {
+ const index = comment.findIndex(value => value.id === id);
+ const clone = comment;
+ const edit = update(clone, {
+ [index]: {
+ text: { $set: text }
+ }
+ });
+ setComment(edit);
+ };
+
+ const deleteComment = id => {
+ const newList = comment.filter(val => val.id !== id);
+ setComment(newList);
+ };
+
return (
-
-
-
+
+
+
{props.post.title}
-
{props.post.name}
-
{props.post.content}
-
+
+ {props.post.name}
+
+
{props.post.content}
+
+ {show &&
}
+ {!show && (
+
+ )}