How can I keep on adding username and status instead of updating the previous one in reactJS?

Question

I have two components. One named 'Adduser' containing form elements so that a user may add details of post. Other named 'PostAdded', in which i want to show all posts in a list item. On every click, I want 'Adduser' to grab data from input elements and pass it to 'PostAdded' in a way that 'PostAdded' show every individual post(title and post together) in a new div instead of updating previous one. What is the best approach to do it?

File 'Adduser.js'

class AddUser extends Component {
constructor(props) {
    super();
    this.state = {
        title : "",
        post : "",
    }
    this.handleclick = this.handleclick.bind(this);
}

handleclick() {
this.setState(prevState => ({
    title : document.getElementById("title").value,
    post : document.getElementById("post").value,
}));
}
render() {
    return(
        <div>
            <input type="text" id="title" placeholder="Title here" />
            <input type="text" id="post" placeholder="Post here" />
            <input type="button" onClick={this.handleclick} value="Add Post" /> 
            <PostAdded posts={this.state.post} /> 
        </div>
        )
    }    
}

export default AddUser; 

File 'PostAdded.js'

import React, {Component} from 'react';    
class PostAdded extends Component {
    constructor(props) {
      super();
    }

    render() {
            return <ul>
            { this.props.posts.map(post =>
            <li>{post}</li> 
            )}        
            </ul>

        }    
    }

export default PostAdded;

Answer 1

In AddUser component change your state and handleclick method. I have not modified your code too much so you can understand it easily.

class AddUser extends Component {
  constructor(props) {
      super();
      this.state = {
        posts: [], 
      }
      this.handleclick = this.handleclick.bind(this);
  }

  handleclick() {
    // accessing values from the input
    let title =  document.getElementById("title").value
    let post = document.getElementById("post").value
    // creating a new object
    let newPostObj = {title, post}
    // concatenating new object to component posts state
    let newPost = this.state.posts.concat(newPostObj)
    // setting newPost as component new state
    this.setState({
      posts: newPost
    })
    // emptying the input fields
    document.getElementById("title").value = ''
    document.getElementById("post").value = ''
  }

  render() {
      return(
          <div>
              <input type="text" id="title"  placeholder="Title here" />
              <input type="text" id="post" placeholder="Post here" />
              <input type="button" onClick={this.handleclick} value="Add Post" /> 
              <PostAdded posts={this.state.posts} /> 
          </div>
          )
      }    
  }

In your PostAdded component update render() method

class PostAdded extends Component {
      constructor(props) {
        super();
      }

      render() {
              return (
              <ul>
                { this.props.posts.map((post, i) =>
                  <li key={`${i}-post`}><span>{post.title}</span><span>{post.post}</span></li> 
                 )}        
              </ul>
              )
          }    
  }

UPDATE

Change your AddUser Component

class AddUser extends Component {
  constructor(props) {
      super();
      this.state = {
        posts: [], 
        title: '',
        post: ''
      }
      this.handleClick = this.handleClick.bind(this);
      this.handleChange = this.handleChange.bind(this);
  }

  // called when we type something in input fields
  handleChange(e) {
   // you can console log here to see e.target.name and e.target.value
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleClick() {
    // using spread operator to copy previous state posts and adding new post object 
    let newPosts = [ ...this.state.posts, { title: this.state.title, post: this.state.post}]
    this.setState({
       posts: newPosts,
       title: '',
       post: ''
    })
  }

  render() {
      return(
          <div>
              // added name,value attributes and onChange listener
              <input type="text" name="title" value={this.state.title} onChange={this.handleChange} placeholder="Title here" />
              <input type="text" name="post" value={this.state.post} onChange={this.handleChange} placeholder="Post here" />
              <input type="button" onClick={this.handleClick} value="Add Post" /> 
              <PostAdded posts={this.state.posts} /> 
          </div>
          )
      }    
  }