How To Change A Text Inside An Element, Corresponding To An Onclick Event In Reactjs?

I am displaying two divisions corresponding, to two button's onClick event: class Home extends React.Component { constructor() { super(); this.state = {

Solution 1:

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 });
}

classHomeextendsReact.Component {
    constructor() {
    super();
    this.state = { isShowMan: true };
  }

  toggleShowMan(isShow) {
    this.setState({ isShowMan: isShow });
  }

  render() {
    const { isShowMan } = this.state;

   return (
      <divclassName="container py-5"><divclassName="row"><buttondisabled={isShowMan}className="btn col-6 bg-transparent col-12 col-sm-6"onClick={() => this.toggleShowMan(true)}
          >
            malebody{" "}
          </button><buttondisabled={!isShowMan}className="btn col-6 bg-transparent col-12 col-sm-6"onClick={() => this.toggleShowMan(false)}
          >
            femalebody
          </button></div><divclassName="row">
          {`Hey ${isShowMan? " man" : "woman"}!`} 
        </div></div>
    );
  }
}

ReactDOM.render(<Home />, document.getElementById('root'));

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

Solution 2:

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

classHomeextendsReact.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 (
      <divclassName="container py-5"><divclassName="row"><buttonclassName="btn col-6 bg-transparent col-12 col-sm-6"onClick={()=> this.toggleShowMale(true)} >
            <imgclassName="humanbody profile"src={malebody} /></button><buttonclassName="btn col-6 bg-transparent col-12 col-sm-6"onClick={()=> this.toggleShowMale(false)} >
            <imgclassName="humanbody profile"src={femalebody}alt="" /></button></div>


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

exportdefaultHome;

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 && (
  <divclassName="mx-auto">
    Hey man!
  </div>
  )}
  {!isShowaMale && (
  <div>
    Hey woman!
  </div>
  )}
</div>
{/* Hidden div */}

with

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