React not rendering jsx in onClick Button-CodePudding

I am new to learning react and am stuck with this doubt. I have a simple button and on click of that button I want to add some text (or any other html) element. The console log statement is getting executed but the div tag is not getting rednered. This is my following code.

function App() {
  const executeMe = () => {
    console.log("executed")
    return(
      <div> Clicked here</div>

    )
  }
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
    <div className="App">
        Hello world
        <Button onClick={executeMe}> click me</Button>
        
    </div>
    </LocalizationProvider>
  );
}

export default App;

I know that I am missing out something which may be very simple. Please help me fix this. Thanks

CodePudding user response：

Your looking at React wrongly, it doesn't work this way. You can do this instead.

import { useState } from "react";

function App() {
  const [clicked, setClicked] = useState(false);
  const [lines, setLines] = useState([]);
  const executeMe = () => setClicked(!clicked);
  const onAddLine= () => setLines(lines.concat("New line (Could be unique)"));
  return (
    <div className="App">
      Hello world
      {/* METHOD A */}
      {!clicked && <button onClick={executeMe }>Click me</button>}
      {clicked && <div>Clicked here</div>}
      <br />
      {/* METHOD B */}
      <button onClick={executeMe}>{clicked ? "Clicked here" : "Click me"}</button>
      <br />
      {/* ADDITIONAL FUN STUFF WITH SEPERATE BUTTON */}
      <button onClick={onAddLine}>Add new line</button>
      <br />
      {lines.map((line, x) => {
        return(
          <div key = {x}>{x 1} : {line}</div>
        );
      })}
    </div>
  );
};

export default App;

CodePudding user response：

You can render that div by using state instead and reset it on the next click.

function App() {

  const [showDiv, setShowDiv] = useState(false);

  const executeMe = () => {
    console.log("executed");
    setShowDiv(!showDiv);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <div className="App">
        Hello world
        <Button onClick={executeMe}> click me</Button>

        {showDiv && <div> Clicked here</div>}  {/* render div once showDiv state is true */}

      </div>
    </LocalizationProvider>
  );
}

export default App;

CodePudding user response：

you can write that html code in another component and import it into the current file you can make useState to check the value is 'visible' with type 'true/false' to check the state when the button is click.

code example

import React, { useState } from "react";
function App() {
  const [showText, setShowText] = useState(false);
  const executeMe = () => {
    console.log("executed")
    setShowText(true);
  }
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
    <div className="App">
        Hello world
        <Button onClick={executeMe}> click me</Button>
        {showText ? <Text /> : null}
        
    </div>
    </LocalizationProvider>
  );
}
const Text = () => <div>You clicked the button!</div>;
export default App;