.map() 메서드가 react에서 사용될 때..
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1);
[2, 8, 18, 32]
출처: MDN Web Docs(https://developer.mozilla.org)
this.state : MainFeeds의 상태를 정의
onChange={this.commentWrite}
onClick={this.commentOut}
{this.state.commentLists.map(el => { return()}
class MainFeeds extends Component {
constructor(props) {
super(props);
this.state = {
first:‘’,
commentLists :[],
};
}
commentWrite= (e) => {
this.setState({
input:e.target.value,
})
}
commentOut = () => {
this.setState({
commentLists:this.state.commentLists.concat(this.state.first),
first:‘’
})
}
render() {
return (
<>
<main className=“mainContainer”>
<article>
<section className=“feed”>
<div className=“commentWrapper”>
<ul id=“commentLists”>
{this.state.commentLists.map(el => {
return(
<li>
<span className=“name”>연비</span>
<span>{el}</span>
</li>
)
} )}
</ul>
</div>
<div className=“comment”>
<input
id=“commentInput”
type=“text”
value={this.state.first}
placeholder=“댓글 달기...”
onChange={this.commentWrite}
/>
<button id=“submit” onClick={this.commentOut}>
게시
</button>
</div>
</section>
</article>
</main>
</>
);
}
}
export default MainFeeds;