Push component to array of components - ReactJS

Viewed 14061

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;
2 Answers
Related