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)}.
Related
so i have a form component having button array,
though i used icons in it with value attribute. just like below.
<button value={'admin'} onClick={(e)=> handleClick(e.target.value)}>
<FaUserSecret classname="text-lg" />
</button>
in handleClick function e.target.value is returning icon instead of admin.
Thanks in advance 😄💗.
I tried to pass e as parametter and use its value in function but still same.
Can you please elaborate or share more code with us. Cause I tried your given code and it's working fine. I am getting 'admin' as the output.
<div className='App'>
<button value={'admin'} onClick={(e)=> console.log(e.target.value)}>
Click
</button>
</div>
Try this:
<button value={'admin'} onClick={e => handleClick(e.target.value)}>
<FaUserSecret classname="text-lg" />
</button>
You're not supposed to use parenthesis around "e".
You can use e.currentTarget.getAttribute("value") method to get the admin value assigned to the button.
CodeSandbox code reference
Difference b/w e.target and e.currentTarget - difference-between-e-target-and-e-currenttarget
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>
</>
);
};
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'm trying to do two things at once when someone clicks on a button to send an email. The code below changes the text of the button to "Sending..." and adds the JSX element <CircularProgress/>
<Button
className={submitButton}
type="submit"
disabled={emailStatus === "loading"}
>
{emailStatus === "loading" ? ("Sending..." ): "Send Email"}
{emailStatus === "loading" && (<CircularProgress size={24}/>)}
</Button>
As you can see I'm checking the email status twice using the ternary operator.
How can I put it all into one, maybe like this, but it doesn't work:
<Button
className={submitButton}
type="submit"
disabled={emailStatus === "loading"}
>
{emailStatus === "loading" ? ("Sending..." , <CircularProgress size={24}/> ): "Send Email"}
</Button>
You can put them inside one parent element and then render that.
<>
Sending ...
<CircularProgress size={24}/>
</>
In my case buttons are created dynamically and functions names are assigned to them dynamically. Function names are received from DB. I know it is possible in JS but in reactJS, I couldn't assign my method names to the relevant Button.
Below is my current code
{this.state.btnArray.map((btnProps, index) =>
<button
key={index}
onClick={() => this.onButtonClick(btnProps.method)}
style={btnStyle}
>
{btnProps.value}
</button>
)}
Here onButtonClick is the method for all buttons, I want it to change for each button.
Try changing your onClick function to call the btnProps.method prop directly
{this.state.btnArray.map((btnProps, index) =>
<button
key={index}
onClick={() => btnProps.method()}
style={btnStyle}
>
{btnProps.value}
</button>
)}