ReactJS Curry Functions to delay Event Binding - reactjs

Question

I am new with React(way) of building UIs and also dabbling with FP a little bit.
Basically , I wanted to know if using curried Functions to delay binding events with fields is a good practice and are there any performance implications.
For EG:
I have a set of Posts and for Each Post there is a Comment Box, where users can comment on that POST.So we will need the Post and the relevent Comment for that Post in my Event Hanlder which is just a function.
Check the working code example at CodePen :
Event Binding
/*
* A simple React component
*/
class Application extends React.Component {
constructor(props){
super(props)
console.log(props)
this.state = {
posts:['post1', 'post2', 'post3']
}
}
render() {
return (
<div>
<ul>
{ this.state.posts.map(
(post, i) => {
return (
<PostSingle post = {post} index = {i} bindPost = {this.props.post(post)}/>
)
}
) }
</ul>
</div>
)
}
}
const PostSingle = ({post, index,bindPost}) => {
let handlePostComment = () => {
return bindPost(null)
}
return (
<div>
<li key={index}>
<input onChange = {
(e) => {
let value = e.target.value
handlePostComment = () => {
return bindPost(value)
}
}
}></input>
<button onClick={() => {handlePostComment()}}>Comment</button>
<p key={index}>{post}</p>
</li>
</div>
)
}
/*
* Render the above component into the div#app
*/
const PostComment = post => comment => {
alert(`You commented ${comment} for ${post}`)
}
ReactDOM.render(<Application post={PostComment}/>, document.getElementById('app'));
So basically PostComment function gets properties in a curried fashion as an when the Objects gets created.
i could not find much examples of these except in Redux Tutorials.
In Actual application the events can be passed to the main component using props in mapDispatchToProps() using Redux.
Your thoughts and comments would be much appreciated.

Answer 1

I think using post property and state is a much more Reacty way. handlePostComment will be reinitialized on every render call so this code is more imperative then functional (IMHO using closures does not make the code functional).
State is the React way of handling imperative logic and you can benefit from React optimizations by using state and props properly.
Generally I think it breaks React Redux philosophy of having a single source of truth.
Also you can't make your input controlled by providing a value in this case.