score:0

right now, you have a single state.show that is shared by all the elements generated by map. you could make state.show an array but there is a much better way to handle this.

you should create a separate component where you will put all the code inside your map function. put state.show and commentinputhandler inside that new child component. then each child component will be able to show/hide itself independently of the other ones

parent

{this.state.posts.map(post => <postcomponent key={post.id} post={post}/>)}

postcomponent

this.state = { show: false }

commentinputhandler = () => {
...

render()
    return (
        <div classname="card mt-4">
        ...

score:1

right now show state holds for only one boolean, you might change it to an object that will hold each post show condition with _id as key (of course you can add it direct into posts state, just you didn't attach it to your code...)


this.state = {
     //inital as empty object
    show: {}
}

componentdidmount() {
   // i update state through didmount, though it is not the only truth and depends on rest code either logic
  let show = {}
  this.state.posts.map(post => show[post._id] = false)
  this.setstate({show})
}

now you can change commentinputhandler into something dynamic


  <span onclick={()=>this.commentinputhandler(post._id)} classname="badge badge-pill badge-primary mr-3 cp">comment</span>


  commentinputhandler = id => {
     const { show } = this.state
     this.setstate({
       show: {...show, [id]: !show.id}
   })
 }

and adapt your checker


  {this.state.show[post._id] ? ...

Related Query

More Query from same tag