Estoy tratando de cambiar el color del botón, dependiendo de "cada estado". Por ejemplo, si el estado está activo, el color del botón sería rojo. de lo contrario sería azul. ¿Alguien tiene una idea sobre cómo implementar eso en reaccionar? Además, me gustaría tener un estado diferente, en lugar de solo dos. por ejemplo, activo, inactivo, activando, pendiente, etc.
¿es esto lo que estás buscando?
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> ); }Para convertir la viñeta en un punto, puede configurar border-radius en el estilo. Personalmente, le sugiero que haga esto en un archivo css separado en lugar de hacerlo directamente en los atributos.
Entonces puedes tener un archivo style.css
.App button { border-radius: 100%; // for a circle }Y en tu archivo js principal
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> ); }