I am using the material UI button for my component and want to change the button text based on a condition that if order amount is 0, show button text as "cancel" else show "refund". Please help me how can I do the same.
<Button
className={classes.refundButton}
onClick={() => setIsDialogOpen(true)}
>
Refund
</Button>
You can use ternary operator for solution.
<Button
className={classes.refundButton}
onClick={() => setIsDialogOpen(true)}
>
{amount === 0 ? 'Cancel' : 'Refund'}
</Button>
You can just store the state and read from there conditionally...
import { useState } from "react"
const [amount, setAmount] = useState(0)
<Button
className={classes.refundButton}
onClick={() => setIsDialogOpen(true)}
>
{amount === 0 ? 'Cancel' : 'Refund'}
</Button>
Related
I want to change the appearence of an button after clicking it.
I have tried adding focus: / active:, but react is re-rendering the component on-click, so it doesn't work.
In Javascript I would add an event-handler to every button that would automatically change the appearence after being clicked, how am I able to recreate that in react/tailwind-css, since tailwind is not working with dynamic className changes?
Is there a good practice, or should I add if statements in order to make it work?
This is what I am trying to recreate.
HTML:
<button>MY BUTTON</button>
<button>MY BUTTON</button>
<button>MY BUTTON</button>
JS:
let button_list = document.querySelectorAll("button");
button_list.forEach(element=>{
element.addEventListener("click",function(){
button_list.forEach(remove_background=>{
remove_background.style.background="white";
});
this.style.background="black";
});
});
I would recommend a state variable to store the active button. Here's a simple example:
const ButtonList = () => {
const [activeButtonIndex, setActiveButtonIndex] = useState(0);
return (
<>
<button
className={activeButtonIndex === 0 ? "bg-white" : "bg-black"}
onClick={() => setActiveButtonIndex(0)}
>
My Button
</button>
<button
className={activeButtonIndex === 1 ? "bg-white" : "bg-black"}
onClick={() => setActiveButtonIndex(1)}
>
My Button
</button>
<button
className={activeButtonIndex === 2 ? "bg-white" : "bg-black"}
onClick={() => setActiveButtonIndex(2)}
>
My Button
</button>
</>
);
};
I have this Button react-bootstrap component
<Button
className="btn-omega has-icon"
onClick={() => { handleFavsClick(data.products)}}
variant=""
>
<Icon size="1.75rem" />
{ liked ? 'Remove from Bookmarks' : 'Add to Bookmarks' }
</Button>
The problem is that text inside conditional if sometimes works and sometimes not
The error message is:
Failed to execute 'insertBefore' on 'Node'
The Icon works fine all the time
const Icon = liked ? BsBookmarkDash : BsFillBookmarkCheckFill
The variable liked is defined here
const key = `like-${id}`
const [liked, setLiked] = useLocalStorage(key, false)
basically is true or false
Is working this way (with a span html tag):
<Button
className="btn-omega has-icon"
onClick={() => { handleFavsClick(data.products)}}
variant=""
>
<Icon size="1.75rem" />
<span>
{ liked ? 'Remove from Bookmarks' : 'Add to Bookmarks' }
</span>
</Button>
How can i get the value Add Property onClick?
Updated Answer
I guess then this is what you are looking for:
onClick={(event) => {
console.log(event?.target?.textContent);
}
Original Answer
Do you have access to isLastStep? If yes, you could just use that to determine which strings is shown in the button like:
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
onClick={() => {
console.log(isLastStep ? "Add Property" : "Next");
}
>
{ isLastStep ? "Add Property" : "Next" }
</Button>
If this is not what you are looking for, can you please be more speficic providing a different example of what you want to do?
I am experiencing an issue with Material-UI's ripple effect when mounting/un-mounting button components. I have some buttons which toggle state, and the button which is displayed is based on this state. The problem is that when I click the button to toggle this state, and the new button is rendered, the ripple/hover effects that were applied from the previous button carries over to the newly mounted button.
Here is a simplified example of this issue on codepen.
Does anyone know why this is happening, and how to prevent this behavior?
React (and thus Material-UI) thinks they are the same button with changed props. You can make React realize they are different buttons by giving them distinct keys (e.g. "button1" and "button2" in my altered version of your sandbox): https://codesandbox.io/s/competent-fermat-q9ojt?file=/src/demo.js.
export function SingleButtonExample() {
const classes = useStyles2();
const [displayedButton, setDisplayedButton] = useState(1);
const toggleDisplayedButton = () =>
setDisplayedButton(displayedButton === 1 ? 2 : 1);
const button1 = (
<Button
key="button1"
variant="contained"
color="primary"
onClick={toggleDisplayedButton}
>
Show Button 2
</Button>
);
const button2 = (
<Button
key="button2"
variant="contained"
color="secondary"
onClick={toggleDisplayedButton}
>
Show Button 1
</Button>
);
return (
<div className={displayedButton === 1 ? classes.button1 : classes.button2}>
{displayedButton === 1 ? button1 : button2}
</div>
);
}
Another way to handle this (which may be more convenient in some cases) is just to make sure the two buttons have a different spot in the JSX:
return (
<div className={displayedButton === 1 ? classes.button1 : classes.button2}>
{displayedButton === 1 && button1}
{displayedButton !== 1 && button2}
</div>
);
This will become either <div>{false}<Button/></div> or <div><Button/>{false}</div> which still allows React to tell that they are different buttons.
I have 3 buttons in reactjs created with Material UI Buttons.
<>
<Button variant="contained">Button 1</Button>
<Button variant="contained">Button 2</Button>
<Button variant="contained">Button3</Button>
</>
How can I make that when clicking on one, it changes it's color (let's say blue) and the other ones reset to Default?
Because React use JSX, you can put javascript in your html component.
We can imagine a single state that manage your buttons.
in your component you create a state containing integer
const [buttonSelected, setButtonselected] = useState(0);
I'm using the react hook syntax, but it also depend on you implementation.
buttonSelected is the current value of the state and setButtonselected is the function that change the state. When you call it, React will rerender your component and change the display .
You can now add a click function on your return
...
<Button variant="contained" onClick={() => setButtonSelected(1)}>Button 1</Button>
<Button variant="contained" onClick={() => setButtonSelected(2)} >Button 2</Button>
<Button variant="contained" onClick={() => setButtonSelected(3)}>Button3 </Button>
...
This will change the value of buttonSelected each time you click a button.
We now need to change the color , for that we will use use makeStyle, but there is other way to do so.
First, create a style element outside of your component.
const useStyles = makeStyles((theme: Theme) =>
createStyles({
selected: {
background: 'blue',
},
default:{
background: 'default',
}
}
),
);
Then call it in your component
const classes = useStyles();
And finally you can set the style that you want depending on the value
...
<Button className={(buttonSelected === 1) ? classes.selected : classes.default} variant.....
<Button className={(buttonSelected === 2) ? classes.selected : classes.default} variant.....
<Button className={(buttonSelected === 3) ? classes.selected : classes.default} variant.....
...
This is a ternary operator, it's the equivalent of
if(buttonSelected === 1){
return classes.selected
} else {
return classes.default
}
And it should work.
You can learn about it in the conditional rendering of react and in the the styling in react
Dont hesitate if you got any questions :)