Now that you're done with the article list, it's time to think about the form controls used to add a new article. Let's implement a component for this aspect of the feature:
import React, { Component } from 'react';
export default class AddArticle extends Component {
render() {
const {
name,
title,
summary,
onChangeTitle,
onChangeSummary,
onClickAdd
} = this.props;
return (
<section>
<h1>{name}</h1>
<input
placeholder="Title"
value={title}
onChange={onChangeTitle}
/>
<input
placeholder="Summary"
value={summary}
onChange={onChangeSummary}
/>
<button onClick={onClickAdd}>Add</button>
</section>
);
}
}
Now, your feature component only needs to render <AddArticle> and <ArticleList> components:
render() { const { articles, title, summary, } = this.state.data.toJS(); return ( <section> { /* Now the add article form is rendered by the "AddArticle" component. This component can now be used in several other components. */ } <AddArticle name="Articles" title={title} summary={summary} onChangeTitle={this.onChangeTitle} onChangeSummary={this.onChangeSummary} onClickAdd={this.onClickAdd} /> { /* Now the list of articles is rendered by the "ArticleList" component. This component can now be used in several other components. */ } <ArticleList articles={articles} onClickToggle={this.onClickToggle} onClickRemove={this.onClickRemove} /> </section> ); }
The focus of this component is on the feature data while it defers to other components for rendering UI elements.