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;
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:
useState hook to create a stateThis is covered in the React manual
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;
Add state - in this simple example we're just updating the h1 element.
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.
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>