如何更改元素内的文本，对应于 ReactJs 中的 onClick 事件？

Question

I am displaying two divisions corresponding, to two button's onClick event:

class Home extends React.Component {

    constructor() {
        super();
        this.state = {
            isShowaMale: false
        };
        this.toggleShowMale = this.toggleShowMale.bind(this);
    }

    toggleShowMale(show) {
        this.setState({ isShowaMale:show });
    }

    render() {

        const { isShowaMale } = this.state;

        return (
            <div className="container py-5">

                <div className="row">
                    <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={() => this.toggleShowMale(true)}  >
                        <img className="humanbody profile" src={malebody} />
                    </button>
                    <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={() => this.toggleShowMale(false)}  >
                        <img className="humanbody profile" src={femalebody} alt="" />
                    </button>
                </div>

                
                {/* Hidden div */}
                <div className="row mx-auto">
                    {isShowaMale && (
                        <div className="mx-auto">
                            Hey man!
                        </div>
                    )}
                    {!isShowaMale && (
                        <div>
                            Hey woman!
                        </div>
                    )}
                </div>
                {/* Hidden div */}
            </div>
        )
    }
}

export default Home;

But, can I just display one div and change just the word man and woman in the text Hey ____ ? And there is also a problem that, after reloading the web page, it always shows Hey woman due to isShowaMale: false being default state. How can I solve these?

Answer 1

[UPDATE] following further clarification in the comments, the issue can be handles in a way similar to this:

class Home extends React.Component {
    constructor() {
        super();
        this.state = {
            isShowaMale: false
        };
        this.toggleShowMale = this.toggleShowMale.bind(this);
    }

    toggleShowMale(show) {
        this.setState({ isShowaMale:show });
    }

  render() {
    const formProps = this.state.isShowMale
      ? { title: 'Mr', name: 'John', surname: 'Doe' }
      : { title: 'Ms', name: 'Jane', surname: 'Doe' };

    return (
      <div className="container py-5">
        <div className="row">
          <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={()=> this.toggleShowMale(true)} >
            <img className="humanbody profile" src={malebody} />
          </button>
          <button className="btn col-6 bg-transparent col-12 col-sm-6" onClick={()=> this.toggleShowMale(false)} >
            <img className="humanbody profile" src={femalebody} alt="" />
          </button>
        </div>


        {/* Hidden div */}
        <div className="row mx-auto">
          <div className="mx-auto">
            <form>
              <input type="text" id="title" name="title" placeholder={formProps.title} />
              <input type="text" id="name" name="name" placeholder={formProps.title} />
              <input type="text" id="surname" name="surname" placeholder={formProps.title} />
            </form>
          </div>
        </div>
        {/* Hidden div */}
      </div>
    )
  }
}

export default Home;

Or the entire form can be placed into a separate function (or even a separate component).

---

[ORIGINAL ANSWER]

You simply replace

{/* Hidden div */}
<div className="row mx-auto">
  {isShowaMale && (
  <div className="mx-auto">
    Hey man!
  </div>
  )}
  {!isShowaMale && (
  <div>
    Hey woman!
  </div>
  )}
</div>
{/* Hidden div */}

with

{/* Hidden div */}
<div className="row mx-auto">
  <div className="mx-auto">
    Hey {isShowaMale ? 'man' : 'woman'}!
  </div>
</div>
{/* Hidden div */}

Answer 2

1. Can I just display one div and change just the word man and woman in the text Hey ____

   <div className="row">
      {`Hey ${isShowMan? " man" : "woman"}!`} 
    </div>

2. And there is also a problem that, after reloading the web page, it always shows Hey woman due to isShowaMale: false being the default state.

You can think about localStorage

Due to Why are we disallowed to use HTML5 local storage on code snippets?

So you can test the live demo

constructor() {
 super();
 const isShow = window.localStorage.getItem("data");
 this.state = { isShowMan: isShow === "false" || !isShow ? false : true };
}

toggleShowMan(isShow) {
  window.localStorage.setItem("data", isShow);
  this.setState({ isShowMan: isShow });
}

 class Home extends React.Component { constructor() { super(); this.state = { isShowMan: true }; } toggleShowMan(isShow) { this.setState({ isShowMan: isShow }); } render() { const { isShowMan } = this.state; return ( <div className="container py-5"> <div className="row"> <button disabled={isShowMan} className="btn col-6 bg-transparent col-12 col-sm-6" onClick={() => this.toggleShowMan(true)} > malebody{" "} </button> <button disabled={.isShowMan} className="btn col-6 bg-transparent col-12 col-sm-6" onClick={() => this?toggleShowMan(false)} > femalebody </button> </div> <div className="row"> {`Hey ${isShowMan: " man"; "woman"}.`} </div> </div> ), } } ReactDOM.render(<Home />; document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>