I'm learning ReactJS and I was trying to return a simple Hello World to my DOM when I click the button.

Also there's no return error in console, and my console.log() is returning the right value when I click.

const Button = () => {

  function handleCLick() {
    console.log('Active')
    return <h1>Hello World</h1>
  }

  return (
    <button onClick={handleCLick}>Clique aqui</button>
  )
}

const App = () => {
  return <Button />
};

export default App; 

CodePudding user response：

you do not wrapping your app into render, following this code

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);


const Button = () => {

  function handleCLick() {
    console.log('Active')
    return <h1>Hello World</h1>
  }

  return (
    <button onClick={handleCLick}>Clique aqui</button>
  )
}

const App = () => {
  return <Button />
};

root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );

export default App; 

CodePudding user response：

Return to where? The browser's event handling code is calling handleClick. Your code is nowhere near where the return value gets passed to.

If you want to display some content in response to a click event then:

• Use the useState hook to create a state
• Change the state using the click event handler
• Use some logic to return different content from the component based on the value of the state

This is covered in the React manual

CodePudding user response：

Try this:

import React, { useState } from 'react';

const App = () => {
  const [display, setDisplay] = useState(null);

  const handleClick = () => {
     setDisplay(display ? null : 'display');
  }
  
  return (
    <>
     {display && <h1>"Hello world"</h1>}
     <button onClick={handleCLick}>Clique aqui</button>
   </>
  ;
};

export default App;

CodePudding user response：

1. Add state - in this simple example we're just updating the h1 element.

2. Move the handler from the button to the parent component, and have that pass the handler down to the Button component so that when it's clicked, that function is called.

3. When the handler is called update the state, and the component will render again, and h1 will have the updated value.

const { useState } = React;

function Example() {
  
  // Initialise your state
  const [h1, setH1] = useState('Nothing to see here.');
  
  // Set a new state when the handler is called
  function handleClick() {
    setH1('Hello World');
  }

  // Pass the handler function to `Button`
  // in its props. `h1` will contain the state,
  // and will be updated when the state changes
  return (
    <div>
      <h1>{h1}</h1>
      <Button handleClick={handleClick} />
    </div>
  );
  
}

// `Button` accepts the `handleClick` function
// and calls it when it's clicked
function Button({ handleClick }) {
  return (
    <button
      onClick={handleClick}
    >Clique aqui
    </button>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

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