React not rendering jsx in onClick Button

Question

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

you're looking for conditional rendering. 1. stackoverflow.com/questions/67241109/… 2. reactjs.org/docs/conditional-rendering.html — anotherChowdhury
– anotherChowdhury, Commented Aug 19, 2022 at 10:06

GaddBox · Accepted Answer · 2022-08-19 10:37:43Z

1

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;

edited Aug 19, 2022 at 10:37

answered Aug 19, 2022 at 10:18

GaddBox

4225 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chaitra D Over a year ago

I need to get a new "Clicked me" text below the button everytime I click the button

GaddBox Over a year ago

So each time you click it generates a line of text above, so 10 clicks 10 lines ?

Victor Karangwa · Accepted Answer · 2022-08-19 12:11:36Z

0

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;

edited Aug 19, 2022 at 12:11

answered Aug 19, 2022 at 12:05

Victor Karangwa

2,26622 silver badges19 bronze badges

Comments

jhonny17 · Accepted Answer · 2022-08-22 00:17:47Z

0

You should add a state value to check when the button has been pressed. Here is more information about how to use useState hook.

    function App() {
      const [isButtonPressed, setIsButtonPressed] = useState(false);

      const executeMe = () => {
        console.log("executed");
        setIsButtonPressed(true);
      }

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

    export default App;

edited Aug 22, 2022 at 0:17

answered Aug 21, 2022 at 23:51

jhonny17

215 bronze badges

Comments

Abraham Anak Agung · Accepted Answer · 2022-08-22 00:37:48Z

There are many ways to achieve it. First React is just JavaScript, most JS code will work within the component. But some dev might find it not so React which is weird for me :)

So here are the two examples that you might try:

function App() {
  const [list, setList] = React.useState([])

  const handleAddLine = () => {
    const lists = document.getElementById('lists')
    const li = document.createElement('li')
    li.textContent = 'hey'
    lists.append(li)
  }

  const handleAddLineReactish = () => {
    setList(prevList => {
      return prevList.concat(<li>hey</li>)
    })
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={handleAddLine}>Add</button>
      <ul id='lists'></ul>
      <button onClick={handleAddLineReactish}>Add Reactish</button>
      <ul>
        {list.length > 0 && list.map((l, i) => {
          return (
            <li key={i}>{l}</li>
          )
        })}
      </ul>
    </div>
  );
}

sandbox URL: https://codesandbox.io/s/funny-sun-7f4epn?file=/src/App.js

Farhan Mian · Accepted Answer · 2022-08-22 01:15:15Z

0

For something like this we use a react hook called "useState". In "useState" we store a something and on the basis of that we do stuff like to show, hide and more.

See the image

answered Aug 22, 2022 at 1:15

Farhan Mian

222 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Jtidd · Accepted Answer · 2022-08-19 10:16:36Z

-1

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;

edited Aug 19, 2022 at 10:16

answered Aug 19, 2022 at 10:12

Jtidd

378 bronze badges

3 Comments

GaddBox Over a year ago

{showText && <Text />} would be better, no need for null

Chaitra D Over a year ago

Can we do the same without using another component ? I need to get a new line of text everytime I click the button, Then the first time the state gets changed to true,,, How to reset it the next time ?

Adison Masih Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

React not rendering jsx in onClick Button

6 Answers 6

2 Comments

Comments

Comments

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related