After click button or Enter, the input value should be return empty but it it didn't return emp-CodePudding

First of all, thank you so much for trying to help me out! I am just getting started learning React.js, so If I ask a little stupid question, I am sorry. What I expect that when I click the "Post" button, it should be added the list above and the input value should be return "empty" but it remains what I write in the input. I declared the empty value here!

  addComment = () => {
    this.setState({
      commentList: this.state.commentList.concat([this.state.value]),
      value: '',
    });
  };

<ul className="feed-comments">
                <Comment commentAddList={this.state.commentList} />
              </ul>

but it didn't return empty input value. I will leave the whole code below!

Feed.js

import React, { Component } from 'react';
// import "../../styles/common.scss";
import './Feed.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faHeart,
  faComment,
  faPaperPlane,
  faBookmark,
  faEllipsisH,
} from '@fortawesome/free-solid-svg-icons';
import Comment from '../../../compoonents/Comment/Comment';

class Feed extends Component {
  constructor() {
    super();
    this.state = {
      value: '',
      commentList: [],
    };
  }

  getValue = event => {
    this.setState({
      value: event.target.value,
    });
  };

  addComment = () => {
    this.setState({
      commentList: this.state.commentList.concat([this.state.value]),
      value: '',
    });
  };

  addCommEnter = e => {
    if (e.key === 'Enter') {
      this.addComment();
    }
  };
  render() {
    return (
      <div className="feeds">
        <div className="article">
          <div className="identi">
            <img className="selfi-identi" alt="selfi-img" src="about.png" />
            <span className="name"> Jiwan Jeon </span>

            {/* <i id="test" class="fa fa-ellipsis-h" aria-hidden="true"></i> */}
            <div className="faEllipsisH">
              <FontAwesomeIcon icon={faEllipsisH} />
            </div>
          </div>

          <div className="pic">
            <img id="feed-pic" src="ucscPic.png" />
          </div>

          <div className="show-box">
            <div className="reaction-icons">
              <FontAwesomeIcon icon={faHeart} className="heart" />
              <FontAwesomeIcon icon={faComment} className="comment" />
              <FontAwesomeIcon icon={faPaperPlane} className="plane" />
              <FontAwesomeIcon icon={faBookmark} className="bookMark" />
            </div>

            <div className="like-counts">
              <span>like 4,000</span>
            </div>

            <div className="check-comments">
              <span>
                UC Santa Cruz will continue to offer most courses remotely or
                online for spring and summer 2021, providing in-person
                instruction for a small
              </span>
              <a id="space" href="">
                expanding
              </a>
              <br />
              <a href="">Check the all comments</a>
              <ul className="feed-comments">
                <Comment commentAddList={this.state.commentList} />
              </ul>
            </div>
          </div>
          <div className="comment">
            <i className="fa fa-smile-o" />
            <input
              // onChange={this.textChange}
              // onKeyPress={this.enterClick}
              onKeyPress={this.addCommEnter}
              onChange={this.getValue}
              className="user-input"
              type="text"
              placeholder="Add Comment..."
            />
            <button onClick={this.addComment} className="post">
              Post
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default Feed;

This is Comment.js

import React, { Component } from 'react';

export class Comment extends Component {
  render() {
    return (
      <>
        {this.props.commentAddList.map((comm, idx) => {
          return <li key={idx}>{comm}</li>;
        })}
      </>
    );
  }
}

export default Comment;

CodePudding user response：

Your input field is missing the value property which should be bound to the state in order to have a controlled input field. You should add value={this.state.value} as follow:

<input
  // onChange={this.textChange}
  // onKeyPress={this.enterClick}
  onKeyPress={this.addCommEnter}
  onChange={this.getValue}
  className="user-input"
  type="text"
  placeholder="Add Comment..."
  value={this.state.value}
/>

You can learn more about "Controlled Components" in this section of the documentation.