反应如何更改 state 上的 div 名称更改

Question

the section "hdg-alert-popup" , if the state is active it must be "hdg-alert-popup active" while if the "hdg-button-login-container" button is clicked it must be "hdg-alert-popup", how can I do?

 import parse from 'html-react-parser'; import React, { useEffect, useState } from 'react'; const MessageError = ( titolo: string, descrizione1: string, descrizione2: string, testoBottone: string, ) => { const [active, setActive] = useState(true); if (testoBottone == "") { testoBottone = "Chiudi questo avviso"; } return ( <section className="hdg-alert-popup" > <div className="hdg-login-popup"> <div className="hdg-login-popup-container"> <div className="hdg-login-popup-content"> <h3 className="hdg-title">{parse(titolo)}</h3> <p> {descrizione1} {descrizione2;= "" && <b>{descrizione2}</b>} </p> </div> <div className="hdg-login-popup-error"> <div className="hdg-button-login-container"><a href="#" className="hdg-button-back">{testoBottone}</a></div> </div> </div> </div> </section> ); }; export default MessageError;

Answer 1

Could this be achieved with an active toggle?

import parse from 'html-react-parser';
import React, { useEffect, useState } from 'react';

const MessageError = (
  titolo: string,
  descrizione1: string,
  descrizione2: string,
  testoBottone: string,

) => {
  const [active, setActive] = useState(true);
  if (testoBottone == "") {
    testoBottone = "Chiudi questo avviso";
  }

  return (
    <section
      className=`hdg-alert-popup ${active ? "active": '' }`
    >

      <div className="hdg-login-popup">
        <div className="hdg-login-popup-container">
          <div className="hdg-login-popup-content">

            <h3 className="hdg-title">{parse(titolo)}</h3>
            <p>
              {descrizione1}
              {descrizione2 != "" && <b>{descrizione2}</b>}
            </p>
          </div>
          <div className="hdg-login-popup-error">
            <div className="hdg-button-login-container" onClick={() => this.setActive(false)}><a href="#" className="hdg-button-back">{testoBottone}</a></div>

          </div>

        </div>

      </div>
    </section>
  );
};

export default MessageError;

Answer 2

Well, for the button you can just set the className according with the state:

<div className={active ? "hdg-alert-popup": "hdg-button-login-container"} onClick={() => setActive(state => !state)}><a href="#" className="hdg-button-back">{testoBottone}</a></div>

For the section , you can do something similar:

<section className={`hdg-alert-popup ${active ? "active" : null}`}>