I am trying to change the color of the button, depending on "each state". For e.g, if the state is active, the colour of the button would be red. otherwise it would be blue. Does anyone have an idea on how to implement that on react? Additionally, i would like to have different state, instead of just two. e.g. active, inactive, activating, pending etc.
is this what you're looking for ?
import { useState } from "react";
export default function App() {
const [state, setState] = useState("active");
return (
<div className="App">
<button style={{ color: state === "active" ? "#F00" : "#00F" }}>
click me
</button>
</div>
);
}
To make the bullet a dot, you can set border-radius into the style. Personally, I suggest you do this on a separate css file rather than directly in the attributes.
So you can have a style.css file
.App button {
border-radius: 100%; // for a circle
}
And in your main js file
import { useState } from "react";
import './style.css'; // Or what ever path style.css is in
export default function App() {
const [state, setState] = useState("active");
return (
<div className="App">
<button style={{ color: state === "active" ? "#F00" : "#00F" }}>
click me
</button>
</div>
);
}