I am wondering if I could stop all spin to appear when only one delete button is click? Right now when I click on one of the delete buttons, all the spinners appear on all the delete buttons which should have been only the delete button that is performing the action. How should get this to work? Here is my code:
<ul class="list-group">
<h5>Schedules</h5>
{scheduleData.map(items => {
return (
<li key={items._id} class="list-group-item">
{moment(items.startdate).format('MMMM DD, YYYY')}{' '}
<span style={{marginRight: '0.2rem', marginLeft: '0.2rem'}}>
to
</span>
{moment(items.enddate).format('MMMM DD, YYYY')}{' '}
<span style={{float: 'right'}}>
<button
className="btn btn-primary"
onClick={event => deleteSchedule(event, items._id)}
>
{' '}
{loading && <i className="fa fa-refresh fa-spin"></i>}
Delete
</button>
</span>
</li>
);
})}
</ul>
Many thanks in advance and greatly appreciate any helps. thanks
Assuming that loading is a Boolean variable you set true in deleteSchedule, to achieve the result you have to create a loading parameter for every entry.
IMO the best approach would be to create an indipendent element in which you set loading with useState hook. You should pass deleteSchedule to this element and then when button is clicked it should call setLoading(true) and call deleteSchedule.
Other option would be to create a loading list and insert the id of the element which button was clicked in this list then loading would become loading.includes(items._id).
Or you could iterate scheduleData and add loading attribute to every element.
Related
I'm trying to get to work a delete btn which is inside a div which is wrapped in react-router-dom tag. I want to be able to navigate to the established path when that div is clicked. But if the target is that delete btn, then it shouldn't navigate just execute the onClick inside the delete btn. Is this possible? I couldn't figure out on my own. Thanks for reading.
<ul className="m-entries">
{
letters.map(letter => {
return (
<li className="o-entry" key={ letter.id }>
<Link to={`/Letters/letter/${ letter.id }`}>
<div className="l-entry-container">
<div className="l-entry__header">
<h2 className="c-text__h2 c-letter-title">{ letter.title }</h2>
// This is the delete btn
<button
className="c-entry__btn c-entry__dlt-btn"
onClick={(e) => {
displayConfirmDeleteWdw(e, letter.id)
}}
type="button"
>
<XDeleteBtn />
</button>
</div>
<p className="c-text__p c-letter__preview">{ letter.synopsis }</p>
</div>
</Link>
</li>
)})
}
</ul>
It's generally considered bad UI/UX to place interactive DOM elements within other interactive DOM elements (in fact some elements are sometimes illegal when used like this), but there is a way to accomplish this.
The button's onClick event should not propagate up to the Link component. Call stopPropagation on the event to prevent it from bubbling up further.
<ul className="m-entries">
{letters.map(letter => {
return (
<li className="o-entry" key={letter.id}>
<Link to={`/Letters/letter/${letter.id}`}>
<div className="l-entry-container">
<div className="l-entry__header">
<h2 className="c-text__h2 c-letter-title">{letter.title}</h2>
<button
className="c-entry__btn c-entry__dlt-btn"
onClick={(e) => {
e.stopPropagation(); // <-- prevent event from bubbling up
displayConfirmDeleteWdw(e, letter.id);
}}
type="button"
>
<XDeleteBtn />
</button>
</div>
<p className="c-text__p c-letter__preview">{letter.synopsis}</p>
</div>
</Link>
</li>
)})
}
</ul>
I investigated a lot of topics about using button as a link but didn't found a solution for me - I need to open a certain page in a new tab using React bootstrap button.
<Button onClick={() => onClickOpenVacancy(id)}>
React bootstrap offers a prop 'href' but no info how to open in new tab. Any suggestions, please?
You should use href and target together:
<Button href="URL" target="_blank" onClick={() => onClickOpenVacancy(id)}>
It looks like they just leave target with type any without further documentation. It just works the same way as the attribute that exists on the usual <a> tag does.
You could add the button inside the anchor tag
<a href='https://example.com/' target="_blank">
<button className="test" onClick={() => onClickOpenVacancy(id)}>
Click Here
</button>
</a>
or
<button className="test"
onClick="window.location.href = 'https://example.com" target="_blank">
Click Here
</button>
or..not really needed for you still a way would be
<form action="https://example.com/" target="_blank">
<button className="test" type="submit" onClick={}> // onClick not needed
Click Here
</button>
</form>
If onClickOpenVacancy was meant to do the redirection, then you don't need onClick function. the href and target are enough.
Pass in the complete URL in this code snippet and it should work
<Button onClick={() => window.open(URL, '_blank')}>ID</Button>
It's nothing specific to library like bootstrap, etc
go through this code and add customers and delete it. it gives an error.
https://codesandbox.io/s/array-fields-7x1n3
Define like this
<span
onClick={() => deleteIt(index)}>
❌
</span>
function code
const deleteIt=index=>{
console.log(index)
}
I managed to make it work by making your remove span tag like this:
<span type="button"
onClick={() => fields.remove(index)}
style={{ cursor: "pointer" }}>
❌
</span>
Basically I made the span a button. I think the problem lies in the definition of the validator of final-form-arrays, maybe it's something about the difference between span and button onClick event but I'm not sure..
I am trying to use onclick event like below
<button className="mini ui button" onClick={this.view(item['id'])}>
<i className="user icon"></i>
View
</button>
This is creating error like below
But below code is not creating error
<button className="mini ui button" onClick={this.view}>
<i className="user icon"></i>
View
</button>
Change it to onClick={() => this.view(item['id'])}, otherwise the function gets executed immediately during rendering (instead of onClick), which causes repeated re-rendering if the function changes the state/props.
Yes you can use arrow function as previews answer or you can use bind
<button className="mini ui button" onClick={this.view.bind(this, item['id'])}>
<i className="user icon"></i>
View
</button>
These two ways works.
I am using angular package angular-xeditable the problem is I want to call its event onaftersave after i edit the label here is my html:
<h4 >{{ title.key || 'empty' }}
<span onaftersave="save()" editable-text="title.key ">
<i class="fa fa-pencil-square-o" "></i></span>
</h4>
the event onaftersave is called even if i click on the edit button and also while typing in the field
what I want is to call the event only when I click the button
Try to use this code this will helps to prevent function call.
<span>
<a onaftersave="save();" data-ng-model="title.key" e-placeholder="Your text" editable-text="title.key">
<span>{{title.key || 'empty'}}</span>
</a>
</span>