Multi tool use

Swapping Elements in list without state reactjs

I am new with React.

I have list of users having text A and when i onMouseEnter the text A should replace by B and on onMouseLeave it comes to A again.

handleCloseButton(action,id,cb){
if(action == "show"){
return (Helper.CloseButton())
}else{
return (Helper.TimeAgo())
}
}

{
this.props.leadLists.map(function(lead){
return(
<li key={"Lead_"+lead._id} onMouseEnter={() => that.handleCloseButton("show",lead._id,that.closeButtonClick)} onMouseLeave={() => that.handleCloseButton("hide",lead._id,Date())}>
<div className="imgbar">
<Image directory={"users"} source={"4.jpg"} key={"LeadImage_"+lead._id} />
<h3><Link onClick={(e)=>that.props.funLeadDetails(lead,e)} to={`/all-conversations/${lead._id}`}> {lead.first_name} {lead.middle_name} {lead.last_name} </Link></h3>
<div className="mm" id={"CloseButton_TimeAgo_" + lead._id}>
{that.handleCloseButton("hide",lead._id,that.closeButtonClick)}
</div>
<div className="post-dropdown">
<div className="dropdown">
<a className="btn btn-default dropdown-toggle" role="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<Image directory={"users"} source={"4.jpg"} key={"4.jpg"} />
</a>
<div className="dropdown-menu newest-drop" aria-labelledby="dropdownMenu5">
{that.props.usersLists}
</div>
</div>
<div className="icon">{lead.discription}</div>
</div>
</div>
</li>
);
})
}


I tried, but if i use State, it update for all users same and if i use ReactDOM render, its give warning for not good way.

1 Answer
1

To avoid it updating all names at the same time, you should make it a separate component so every "name" will have it's own component state, so it's going to change only one.

So in the end you would map over this.props.leadlists to generate the new component for every element of the array.

That would be the easiest solution. Just to take

<li key={"Lead_"+lead._id} onMouseEnter={() => that.handleCloseButton("show",lead._id,that.closeButtonClick)} onMouseLeave={() => that.handleCloseButton("hide",lead._id,Date())}>
<div className="imgbar">
<Image directory={"users"} source={"4.jpg"} key={"LeadImage_"+lead._id} />
<h3><Link onClick={(e)=>that.props.funLeadDetails(lead,e)} to={`/all-conversations/${lead._id}`}> {lead.first_name} {lead.middle_name} {lead.last_name} </Link></h3>
<div className="mm" id={"CloseButton_TimeAgo_" + lead._id}>
{that.handleCloseButton("hide",lead._id,that.closeButtonClick)}
</div>
<div className="post-dropdown">
<div className="dropdown">
<a className="btn btn-default dropdown-toggle" role="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<Image directory={"users"} source={"4.jpg"} key={"4.jpg"} />
</a>
<div className="dropdown-menu newest-drop" aria-labelledby="dropdownMenu5">
{that.props.usersLists}
</div>
</div>
<div className="icon">{lead.discription}</div>
</div>
</div>
</li>


and make it a new component so they each have their own state.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.