Push component to array of components - ReactJS - arrays

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

Answer 2

In your render you are creating the rows of your list and you have assigned it to the const called 'article'. However your render is:
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>
);
There is no where you are rendering the 'article' created. You could replace {content} with {article}? As I have seen no declaration of content anywhere.
Also, just an aside, you have named so many variables as 'article'. It's a bit hard to follow, might help pluralizing in some cases (but this does not relate to the question asked -:) )