I have made a simple button in react app.
<button onClick={console.log('clicked')}>Click</button>
The problem is that button is continuously click without clicked by me.
<button onClick={() => console.log('clicked')}>Click</button>
is the solution. When you put paranthesis without using the arrow function, it will automatically execute without waiting for you to click the button
onClick takes function as a parameter. Try this and it should work correctly:
<button onClick={ () => { console.log('clicked') } }>Click</button>
Related
Hello i want to loading a button when i am clicking it. My problem is that my buttons are created dynamic. I am using antd styling for the button. My code is below
<Button
loading={this.state.myLoader}
onClick={() => this.myFunction(r,i)}>
Clickme!
</Button>
I was trying using inside onclick method a state that can become true when this function in executed, my problem with this is when i click a button all the button are loading, but i want to loading only the selected button. How i can do this? Inside my onclick method i can take the id of the button that is clicked every time
Try this
this.state = {
myLoader: []
}
In onClick pass the index to the function
this.myFunction = (r, i) => {
const loader = [...this.state.myLoader];
loader[i] = true;
this.setState({myLoader: loader)};
}
in the button
<Button
loading={this.state.myLoader[i]}
onClick={() => this.myFunction(r,i)}>
Clickme!
</Button>
I want to show only the paragraphs related to the selected chapter. To do this I did STATE with the selected Chapter number (the chapters are in numbers)
When I view the paragraphs in the page load it works fine.
I also want to make a list of buttons that move to the other chapters. The problem is that when I press the above buttons it does not change the STATE and I did console.log and really saw that the parameter I pass is incorrect. Where am I wrong in the code?
{allChapters.map(allChapter =>
<button key={allChapter} onClick={(allChapter) => this.handleChange(allChapter)}>
{allChapter}
</button>
)}
handleChange = (chapNum) => {
this.setState(({ currentChapter }) => ({ currentChapter: chapNum }))
console.log('chapNum', chapNum);
};
console.log()
It is important to note: {allChapter} is mirror number (1,2,3, ...) and the problem is not in it.
With your current code, the only thing you do is to rename the default onClick event parameter to allChapter. Just do this instead:
{allChapters.map(allChapter =>
<button key={allChapter} onClick={() => this.handleChange(allChapter)}>
{allChapter}
</button>
)}
Btw, you should change the variable name allChapter to chapter ;)
<button key={allChapter} onClick={(allChapter) => this.handleChange(allChapter)}>
{allChapter}
</button>
By doing this, you rename the default onClick event parameter with
allChapter
Then you pass this renamed event to the handleChange. It's why, your console.log shows an event.
The correct way to pass your parameter is :
<button key={allChapter} onClick={() => this.handleChange(allChapter)}>
{allChapter}
</button>
How come the following React Button Emitter is not working? It should display the word Apple, with button click.
function App() {
return (
<div>
<button onClick={handleClick('apple')}>
Test Button
</button>
</div>
)
}
function handleClick(props) {
console.log(props)
}
In order for it to get called on click you need to pass a function. Right now your code is invoking the function:
function App() {
return (
<div>
{/* Creates an anonymous function that calls `handleClick` */}
<button onClick={() => { handleClick('apple'); }}>
Test Button
</button>
</div>
)
}
By doing onClick={handleClick('apple')} what you are doint is to put the result of handleClick('apple') at rendering time, not onClick time.
onClick={() => handleClick('apple')} will work because you are creating a function and assign it to onClick, without executing it yet.
This is how React works, because what you are writing is actually just javascript (not html, even if it looks like so).
Your way would instead be perfectly ok if you were using Vue, for example, because in that case you are working in an html template (unless you don't want to use jsx..)
I am working with mapbox react gl - It is working pretty nice so far... except one thing.
The user can add their hometown location to the map. When the hometown location appears, it can be clicked to view a popup. I want the user to be able to remove the location from the map from inside the popup - So I added a function that removes the location from the database when a button is clicked. The problem is when the button is inside the popup the function doesn't fire - and I have no idea why.
I have messed with the z index of the button but it seems like whenever the button is clicked, the onClose function is being called instead of my handleDeleteHome function...
Edit* If I remove the onClose function, the handleDeleteHome function fires.
Any help is appriciated! Thanks!
{selectedHome && (
<Popup
latitude={bandLocation[0]}
longitude={bandLocation[1]}
onClose={() => {setSelectedHome(null)}}
offsetLeft={23}
offsetTop={-10}
>
<div>
<h4>Home Town</h4>
<Button
onClick={(e) => {
e.preventDefault()
handleDeleteHome()
}}
color="danger">x</Button>
</div>
</Popup>
)}
Alright! Figured it out - If anyone else needs to know:
You need to add closeOnClick={false} to the popup!
I have multiple button on the screen , I want that user either click this button to route to the new item or user could have close this , for that i have given the close icon within the button so that user can close that if they want , but when i am trying to give onclick function to the icon within the button it does not work
how could i do that ???
Here is the demo code
https://codesandbox.io/s/material-demo-rbkr8
try wrapping it with a div onClick like this?
const doSomething = () => {
alert('click here');
}
<div onClick={doSomething}>
<DeleteIcon className={classes.rightIcon} />
</div>