Sign in
Log inSign up

How to change text of particular element onclick ?

Mrudang Shah's photo
Mrudang Shah
·Apr 30, 2019

I need to change a text of a link when it is clicked. Currently if i click on a link it changes all the links texts simultaneous. The feeds are like more than 20 posts in loop. In construction i have set the initial state of title like this: 

constructor(props){
    super(props);
    this.state = {
      title: "Save",
    };
    this.savePost = this.savePost.bind(this);
  }

onclick function 

savePost = (item, e) => {
    fetch( API  , {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    })
    .then(
      this.setState({ title: "Post Saved" }))
  }

Onclick function that i used in Link tag is: 

{ this.state.itemData.map((item,index) => {
let boundItemClick = this.savePost.bind(this, item);
<li>
<Link to="#!" className="trans" title="Save" value={item.id} data-id={item.id} onClick={boundItemClick}>
<img className="svg" src={ siteurl + "/src/assets/images/save.svg"} alt="Save" />
 { item.save_post_status === false ?  this.state.title 
 : item.save_post_status === true ? 'Post Saved' : 'Save' }
</Link> 
</li>
}})

So, how can i change the only that clicked element of that particular Link rather than changing to all Link text ? Or i can say how can i check that it is clicked on a particular element ?

For instance: In our Hashnode site if click on a Like button of a particular post then it likes that only post on which i press a Like button likewise i also need to same thing in my application but in my case if i click on a like button then it changes the state of text to all the posts.

2