Hello :) I'm using Bootstrap to make an offcanvas component that can render a modal for each item in an array passed to it. However, when clicking open my modals, they each display omly the first items props. Why? And, how can I fix it? I recreated it here in codesandbox codesandbox recreation
If i can improve my question let me know in a kind way, please.
The way you have done is not the correct way of building Modal in React .
However just to give you clarity about the mistake you have done:
The prop letter is passed correctly. The problem is the way you're calling the modal.
If you see your code in Example.js , you have used data-bs-target="#exampleModal". And id="exampleModal" for the modal to show up.
So all the handlers are pointing to exampleModal id . Hence After you click on the buttons only the first modal shows up.
To solve this , you need to assign the data-bs-target and id dynamically. Something like below :
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target={`#exampleModal${props.letter}`}
>
click to view prop
</button>
and then in Modal set id as :
<div
class="modal fade"
id={`exampleModal${props.letter}`}
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
It should work as expected.
here is the working example : Demo
Related
I'm using material-ui as my css framework and I want to select button that contains a specific text.
My current code:
cy.get('button').contains('Edit Claim').should('be.disabled');
It fails because the button component of material ui outputs the text inside a div so cypress is asserting the disabled attr to the div. I want it to assert to the button.
Edit:
I solved it using cy.contains('button', 'Edit Claim').should('be.disabled');
On the Material-UI demo page the label is in a child <span> (not <div>),
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained Mui-disabled Mui-disabled" tabindex="-1" type="button" disabled="">
<span class="MuiButton-label">Disabled</span>
</button>
but there may be variations - in any case, you can reference the button by adding .parent() to the test
cy.visit('https://material-ui.com/components/buttons/');
cy.get('button')
.contains('Disabled') // span is the subject
.parent() // move up to the button
.should('be.disabled');
I use reactstrap. I have this kind of <button> with an icon inside :
{this.props.mode === "update"
?
<Button
className="btn btn-danger btn-sm"
onClick={() => this.deleteQuestion()}
>
<i className="fa fa-trash"></i>
</Button>
: null
}
If I click on the icon, the function in not triggered.
If I click outside the icon (but inside the button), the function is triggered.
What is this mystery? I am a beginner in React and react-strap.
The reason it behaves this way is because icon captures click before it is propagated to the button. The easiest way to fix this is to add the following in your css
.btn i.fa{
pointer-events: 'none';
}
it will fix it for all the buttons in your project
There is a concept called event capturing and event bubbling in JavaScript. Take a look at Event Capturing and Event Bubbling. This concept helps you overcome the problem that you're facing currently.Take a look at this. You can add the same function onClick to the icon too. This will help you as well!!.. There are so many design templates available you can try those too. For eg. There's Ant Design. Hope it helps!!.. Happy Coding!!
I have a bootstrap popover which has 2 buttons Yes or No. Based on the response from the user i need to call AngularJS service function. How do i do that??
Popover is created only if it meets a certain criteria (like existence of duplicate records)
HTML code looks something like below, but currently doesn't have 2 buttons & still need to work on it
$(document).ready(function () {
if (DuplicateRecord) {
$('[data-toggle="popover"]').popover();
}
});
<button href="#" data-toggle="popover" title="Popover Header"
data-content="Some content inside the popover" data-trigger="click"
data-html="false" data-placement="left">
Toggle popover
</button>
Looks like you are mixin concepts (or maybe I'm not getting your question), you can have a popover but the data-trigger="click" makes showing the popover on the click event and you wanna use that event to call the service method. Change the popover trigger to hover and then use the click event to call your service. Something like this just as an idea, the snippet is not tested.
<button
type="button"
data-toggle="popover"
title="Popover Header"
data-content="Some content inside the popover"
data-trigger="hover"
data-html="false"
data-placement="left"
ng-click="$ctrl.callSomeMethod()"
>
Toggle popover
</button>
You can take a look to UI Bootstrap lib which has a directives for the Bootstrap's components equivalents.
I am building a simple React application that implements CRUD operations on the client-side and communicates with a backend via Ajax. I have a container component that has a list component that has many items.
So I have a component with a form to create a new item. I can also write a similar form to edit an item in the list. But I wanted to actually make a modal popup instead of just having a form on the same view. Typically, for instance, with Materialize, you have the following:
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must
// specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
So I have an edit button in each list item that would actually be the first part of the code above. Now my question is: where should the second part of the code -- the modal itself -- go in the structure of my React components? If I place it in the ListItem component, then every item is going to have a modal. My idea was to place the modal structure in the container component, right after the List component itself. But it does not seem to be working. So where exactly would you place your modal structure if you are using React? Note: I am not using Flux nor Redux, I am just trying to build a simple application using state and props.
// ContainerComponent:
<List>
<NewItemForm>
// I put the modal code inside the EditForm component,
// but it doesn't seem to be trigger from the ListItem edit button :/
<EditForm>
// My ContainerComponent has the following code in componentDidMount:
$('.modal-trigger').leanModal();
If I'm having this code below. How can I render the div(#divToRender) when clicking the button. I know there is angularJs code for hide/show. But I dont want it to be rendered until I click my button. Is that possible? //Thanks
<button>Render my div!</button
<div id="divToRender">
Some text
</div>
You could use ng-if, it will render the element only if the expression is evaluated to true.
<button ng-click="showMyDiv = true">Render my div!</button>
<div id="divToRender" ng-if="showMyDiv">
Some text
</div>
Example Plunker: http://plnkr.co/edit/jtasEuhNCghprsGZjSrh?p=preview
Also see ngIf documentation.