score:0
if the two buttons shouldn't be active at the same time, you can change the condition :
on :
active ? "btn-animation" : "active-animation"
off :
!active ? "btn-animation" : "active-animation"
score:0
one of the easiest solution for this problem. you need an active state for this purpose. this solution would definitely help you.
const {usestate,fragment} = react;
const app = () => {
const [active, setactive] = usestate("");
const handleclick = (event) => {
setactive(event.target.id);
}
return (
<fragment>
<button
key={1}
classname={active === "1" ? "active" : undefined}
id={"1"}
onclick={handleclick}
>
solution
</button>
<button
key={2}
classname={active === "2" ? "active" : undefined}
id={"2"}
onclick={handleclick}
>
by
</button>
<button
key={3}
classname={active === "3" ? "active" : undefined}
id={"3"}
onclick={handleclick}
>
jamal
</button>
</fragment>
);
}
reactdom.render(
<app/>,
document.getelementbyid("react")
);
.active{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>
score:1
one way of going about it is to keep a separate variable in state for each button.
example
class animationsettings extends react.purecomponent {
state = {
isfirstactive: false,
issecondactive: false
};
handlefirstclick = () => {
this.setstate(({ isfirstactive }) => ({ isfirstactive: !isfirstactive }));
};
handlesecondclick = () => {
this.setstate(({ issecondactive }) => ({
issecondactive: !issecondactive
}));
};
render() {
const { isfirstactive, issecondactive } = this.state;
return (
<div classname="animation-buttons">
<button
onclick={this.handlefirstclick}
classname={isfirstactive ? "btn-animation" : "active-animation"}
>
on {isfirstactive && "(active)"}
</button>
<button
onclick={this.handlesecondclick}
classname={issecondactive ? "btn-animation" : "active-animation"}
>
off {issecondactive && "(active)"}
</button>
</div>
);
}
}
reactdom.render(<animationsettings />, document.getelementbyid("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
score:1
this is the working solution,
class animationsettings extends react.purecomponent {
constructor(props) {
super(props);
this.state = {
active: true,
buttonidsarray: ["button1", "button2"]
};
}
componentdidmount() {
this.initbutton();
}
initbutton = () => {
this.state.buttonidsarray.foreach(button => {
document.getelementbyid(button).classlist.remove("active-button");
document.getelementbyid(button).classlist.add("inactive-button");
});
};
handleclick = id => {
this.initbutton();
document.getelementbyid(id).classlist.add("active-button");
document.getelementbyid(id).classlist.remove("inactive-button");
this.setstate({ active: !this.state.active });
};
render() {
const { active } = this.state.active;
console.log(active);
return (
<div classname="animation-buttons">
<button
id="button1"
onclick={() => this.handleclick("button1")}
classname={active ? "btn-animation" : "active-animation"}
>
on
</button>
<button
id="button2"
onclick={() => this.handleclick("button2")}
classname={active ? "btn-animation" : "active-animation"}
>
off
</button>
</div>
);
}
}
reactdom.render(<animationsettings />, document.getelementbyid("root"));
.active-button {
background-color: #fff;
}
.inactive-button {
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
i hope it helps!
Source: stackoverflow.com
Related Query
- How to add "active" class onClick on different buttons in react
- How to add an active class to my navigation links React router?
- On button click, how to add selected class and remove from all other buttons in React functional component?
- How to add active class to the pagination in React
- How to add active class to a list of buttons onClick, they are not controlled by parent
- How to add an active class to an active Link in react router dom v6.3 using styled components - ReactJs ^18.1.0
- how do i add active class to individual component which is mapped in react on hover
- React - How to add onclick function to buttons in each row in Datatables
- How to add class in element on scroll React js
- React add class active on selected tab
- how to add two onClick functions in React
- How to add active class to clicked item in ReactJS
- Add active class on a map items react
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- Add class to specific element in React onClick
- How to add a CSS class to an element on click - React
- How to add slick-active class in Slider dots in React Slick
- REACT.JS: How to loop over all NavBar buttons and remove their class and add "active" class to the clicked button
- How to add dynamic content to React Material UI expansion panels whilst keeping only one active tab at at time functionality
- How to add a onclick event in ag-grid cell renderer reactjs and access the class function
- How to add redirect link to onclick Material ui icon - React
- Add active class to li items in react
- How to add a CSS class to an element with React function components
- How do I add type to onChange & onClick functions in typescript react
- How to render different component onClick using React material-ui Drawer list?
- How to add "active" class to styled components in React
- Toggle active class for the child or its relevant siblings onClick in React
- How to add class in the <tr> for react-table in React Js?
- add active class to selected item react
- How to add active class to link with current page and locale?
More Query from same tag
- React hook form two inputs with same register key
- React passing props to child component using TypeScript and React Router
- React - Can't fetch image from URL but works in C#
- How to pass the Like value from one component to another component using reactjs?
- Pass props to react route sidebar solution
- Render Blob as State with this.setState() and render Image in DOM
- Best way to implement edit functionality in my react component
- How to change multiple style elements through React without using a third party library?
- ReactJS Component Architecture Problems / Nested Components or Single Component Manager
- Firebase Phone Auth Recaptcha Verifier not being set to window/loading
- Apply external custom css to a reactstrap input
- Fetching the data in React
- Is there a way to have custom breakpoints in React-Bootstrap
- How to manage function component state in NextJS?
- React Router activeClassName not changing class to the active route
- Yarn on Chrome: Uncaught SyntaxError: Unexpected token <
- How to render when the function is a character string
- should I use shouldComponentupdate?
- React.js: How to get all props component expects?
- How to access collections in Firebase Firestore
- Invoking a node module from react component
- Where to put all the screens which are common in multiple stack navigators? - React Navigation v5
- 502 error response from API Gateway in react but works on postman
- Ternary operator for Setstate
- A component is changing an uncontrolled Autocomplete to be controlled
- event.target.value is showing undefined
- startsWith only working for first condition
- How can a component do layout of its children?
- I need to call two APIs in Reactjs
- How do you combine/compose multiple Higher Order Components (react.js)?