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?
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 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>
const [editable, setEditable] = useState([false,false,false]);
{ !editable[1] ? (
<Button variant="outlined" onClick={handleChange(1)} >EDIT </Button>
):(
<Button variant="outlined" > Other buttons </Button>
)}
Pretty simple trying to make an array of false values and then toggle between two displays no matter what I used for the tertany if gives me the bottom selection.
const handleChange=(val)=>{
if (val===1){
setEditable([true, true, true])
}
}
{ !editable[1] ? (
<Button onClick={()=>handleChange(1)} >EDIT </Button>
):(
<Button > Other buttons </Button>
)}
//You should try this, you just need to toggle values on handle change
Your code looks fine. The issue could be the fact that editable[1] is always false. Try to update the state. I am putting a little demo below.
Demo
Edit: As #mikaels-slava stated, the problem is probably caused by the onClick={handleChange(1)} part. Since you send the function, not running it. You should change it to onClick={() => handleChange(1)}.
I am trying to pass a value from a Material-UI Button when it's clicked to it's click handler, but it's always showing value of undefined. Earlier when I was using a simple button, I was getting value but not after.
const categoryChangedHandler = (e) => {
console.log("category choosed ========= " + e.target.value);
setCategory(e.target.value);
};
<Button className="CategoryButton" variant="outlined" color="primary"
value={category}
onClick={e => categoryChangedHandler(e)}
style={{ textAlign: 'center' }}
>
{category}
</Button>
and I am getting the result:
category choosed ========= undefined
You need to use event.currentTarget.value instead of event.target.value.
The text of a Material-UI Button is within a <span> inside a <button> element. When you click on the text, event.target will refer to the span element; whereas event.currentTarget will refer to the element with the event handler attached (i.e. the button element) that the click event bubbled up to.
Here's a simple working example:
import Button from "#material-ui/core/Button";
export default function App() {
return (
<Button value="hello" onClick={(e) => console.log(e.currentTarget.value)}>
Hello World
</Button>
);
}
Related answer:
Props not being passed down to Material UI button text
Documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
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 :)