New to coding and I'm trying to make it so you click on a button and it changes the color of that button, then when you click on the button right next to it, that button changes color and the previous button goes back to its original color. After pressing the left button the focus should shift to the left button again. I've tried many, many different things, but this is what I have right now.
const [buttonOneOn, setButtonOneOn] = useState(false)
const [buttonTwoOn, setButtonTwoOn] = useState(false)
function onChangeForFilter(e) {
setButtonOneOn(prevButtonOn=>!prevButtonOn)
if(buttonOneOn===true){
e.target.style.color = "grey"
}
else{e.target.style.color='blue'}
if(buttonTwoOn===true){
setButtonOneOn(false)
}
}
function onChangeForFilter2(e) {
setButtonTwoOn(prevButtonOn=>!prevButtonOn)
if(buttonTwoOn===true){
e.target.style.color='grey'
}
else{e.target.style.color='blue'}
if(buttonOneOn===true){
setButtonOneOn(false)
}
}
Obviously, this code doesn't do what I want to at all. Couldn't find any answers online. If anyone has any resources it would be appreciated.
You can really attain that purely in css. heres some sample you can play. Let me know if this is what you mean.
button {
background-color: white;
border-radius: 10px;
color: black;
}
button:focus {
background-color: red;
border-radius: 10px;
color: white;
}<div>
<button>My button 1</button>
<button>My button 2</button>
<button>My button 3</button>
</div>My approach uses state and template literals to play with className
import './css.css'
export default function Buttonsso() {
const [buttonOne, setButtonOne] = useState(false);
const [buttonTwo, setButtonTwo] = useState(false);
function eForBtn1() {
setButtonOne(buttonOne=>!buttonOne);
}
function eForBtn2() {
if(buttonOne === true & buttonTwo=== false) {
setButtonOne(false);
setButtonTwo(true);
}
}
return (
<div>
<button className={`${buttonOne ? "purple" : ""}`} onClick={() => eForBtn1()}>btn1</button>
<button className={`${buttonTwo ? "orange" : ""}`} onClick={() => eForBtn2()}>btn2</button>
</div>
)
}
The css.css file looks like
.purple {
background-color: purple;
}
.orange {
background-color: orange;
}
I do not have your render function so could not work on your code. But my solution works for sure.