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.
Constructor
constructor(props){
super(props);
this.state = {
itemData: []
};
}
savePost = (item, index) => {
fetch( API , {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(data=> {
const items = Object.assign([], this.state.itemData);
item[index].save_post_status=true;
this.setState(this.state, {itemData:items });
})
}
inside render
{ this.state.itemData.map((item,index) => {
<li>
<Link to="#!" className="trans" title="Save" value={item.id} data-id={item.id} onClick={()=> savePost(item, index)}>
<img className="svg" src={ siteurl + "/src/assets/images/save.svg"} alt="Save" />
{ item.save_post_status === false ? "Save" : "Post Saved" }
</Link>
</li>
}})
Try above code, may be it will help you!!
So far i solved this question by following way.
constructor(props){ super(props); this.state = { title: "Save", savedId: [], }; this.savePost = this.savePost.bind(this); } ---------------------------------------------------------------------- savePost = (item, e) => { if( item.save_post_status == false ){ this.state.savedId.push(item.id); //push each id in the savedId array. this.setState({ title: "Post Saved" }) let savePostsAPI = API URL, fetch( savePostsAPI , { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, }) } }Now in the html i used includes method for comparing the array values.
{ this.state.itemData.map((item,index) => { let boundItemClick = this.savePost.bind(this, item); <li> <Link to="#!" className="trans" title="Save" data-id={item.id} onClick={boundItemClick}> { item.save_post_status === false ? this.state.savedId.includes(item.id) ? <img className="svg" src={ imgurl_after } alt="img" /> : <img className="svg" src={ imgurl_before } alt="img" />} </Link> </li> }})