Push component to array of components - ReactJS

Question

I am a bit lost in React arrays. What I want to do is to have array of components (articles) and in that array I want to have title and content.

What I want to do with that array is add, remove and display it on my page.

So what am I doing wrong? Also what is this action exactly called?

Code was from ReactJS demos and modified a little by me.

var ReactDOM = require('react-dom');
var React = require('react');

// Articles page

const Articles = React.createClass({
  getInitialState() {
    return {article: [

      {'title': 'hello', 'content': 'hello hello'},
      {'title': 'hello1', 'content': 'hello hello1'},
      {'title': 'hello2', 'content': 'hello hello2'},
      {'title': 'hello3', 'content': 'hello hello3'}

    ]};
  },
  onAdd() {
    const newArticle =
      this.state.article.concat([window.prompt('Enter article')]);
      this.setState({article: newArticle});
  },
  onRemove(i) {
    const newArticle = this.state.article;
    newArticle.splice(i, 1);
    this.setState({article: newArticle});
  },
  render() {
    const article = this.state.article.map((article, i) => {
      return (
        <div key={article} onClick={this.onRemove.bind(this, i)}>
          {article}
        </div>
      );
    });
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-12 cBusiness">
            <p>Articles Page</p>

            <button onClick={this.onAdd}>Add Article</button>
              <br />
              <br />
                {title}
              <br />
              <br />
                {content}
          </div>
        </div>
      </div>
    );
  },
});

module.exports = Articles;

Answer 1

In your render method there are no variables title and content, however there is variable article where you are creating list with articles, you should remove variable title and content from render and use article. I've refactored your code, and now it looks like this

const Articles = React.createClass({
  getInitialState() {
    return { 
      articles: [
        {'title': 'hello', 'content': 'hello hello'},
        {'title': 'hello1', 'content': 'hello hello1'},
        {'title': 'hello2', 'content': 'hello hello2'},
        {'title': 'hello3', 'content': 'hello hello3'}
      ]
    };
  },

  onAdd() {
    const title = window.prompt('Enter article title');   
    const content = window.prompt('Enter article content');

    this.setState({
      articles: this.state.articles.concat({ title, content })
    });
  },

  onRemove(index) {
    this.setState({ 
      articles: this.state.articles.filter((e, i) => i !== index)
    });
  },

  render() {
    const articles = this.state.articles.map((article, i) => {
      return (
        <div key={i}>
          <h2>
            { article.title } 
            <span
              className="link" 
              onClick={ this.onRemove.bind(this, i) }
            >
             X
            </span>
          </h2>
          <p>{ article.content }</p>
        </div>
      );
    });

    return (
      <div className="container">
        <div className="row">
          <div className="col-md-12 cBusiness">
            <p>Articles Page</p>
            <div>{ articles }</div>
            <button onClick={this.onAdd}>Add Article</button>
          </div>
        </div>
      </div>
    );
  },
});

Example