1

Tengo varios botones con forma de corazón y me gustaría que al hacer click sobre ellos cambiaran de color a rojo. Tal y como lo tengo ahora mismo solo me sale el fondo rojo cuando hago click, pero no sale en forma de corazón. Ya he probado con el código de otras preguntas pero no me funciona.

Este es el código que tengo:

return <div className="text-center mt-5">
    <h1>Planetas</h1>
      <div className="row flex-nowrap overflow-scroll">
        {store.planetas.map((planeta, id) => {
          return (
            <div key={id}>
              <div className="col">
                <div className="card custom-card" style={{ width: "18rem" }}>
                  <img src="https://images.milenio.com/wHfUPkc60fR3N98MP9F2Wj1Zs2c=/936x566/uploads/media/2018/05/04/existen-en-el-universo-planetas.jpg" className="card-img-top"></img>
                  <div className="card-body">
                    <h5 className="card-title">{planeta.name}</h5>
                    <Link className="btn btn-primary" to={`/planeta/${id}`}>
                      {planeta.name}
                    </Link>
                    <button className="heart-button" onClick={() => actions.agregarFavoritos(planeta.name)}><svg xmlns="http://www.w3.org/2000/svg" className="heart" width="28" height="28" viewBox="0 0 24 24" strokeWidth="1.5" stroke="#000000" fill="none" strokeLinecap="round" strokeLinejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
                  </svg></button>
                  </div>
              </div>
              </div>
            </div>
          );
        })}
        ;
      </div>
    </div>

};

export default Planeta;

(estos botones están asociados a un botón de favoritos)

El CSS:

.heart-button {
    display: inline-block;
    border: none;
    background: none;
    display: inline-block;
    text-align:center;
    margin-left: 5px;

  }
  
  .heart-button:active {
      background-color: red;
  }

1 respuesta 1

1

Removí parte del código innecesario. Te dejo el ejemplo de como cambiar el corazón a color rojo, añadiendo una clase active al botón, y otra clase al path del corazón para poder cambiar su color cuando esté activo.

const App = (props) => {
  const [active, setActive] = React.useState(false);
  return    <div>
              <div className="col">
                <div className="card custom-card" style={{ width: "18rem" }}>
                  <div className="card-body">
                    <h5 className="card-title">Jupiter</h5>                    
                  </div>
                  <button className={`heart-button ${active?"active":""}`} onClick={() => setActive(!active)}><svg xmlns="http://www.w3.org/2000/svg" className="heart" width="28" height="28" viewBox="0 0 24 24" strokeWidth="1.5" stroke="#000000" fill="none" strokeLinecap="round" strokeLinejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path className="heart" d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
                  </svg></button>
              </div>
              </div>
            </div>
         
}
ReactDOM.render( <App />, document.querySelector('#root'));
.heart-button {
    display: inline-block;
    border: none;
    background: none;
    display: inline-block;
    text-align:center;
    margin-left: 5px;
}

.heart-button.active .heart{
  fill: red;
}
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="root"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.