https://gist.github.com/justgoof9/7610432925d5f921dc745071d1d67657
So I made the onDismiss button but when I pass it on to the onClick in the Delete button it doesn't do anything. Can anyone help me?
<IconButton aria-label="Delete" onClick={() => this.onDismiss() }>
You are creating an anonymous function that returns a onDismiss function, so when onClick is called due to a click, its only returning the function, not calling it. BTW, creating anonymous functions inside renders is frowned upon consider refactoring it out to its own function
Related
I have the following code to use React To print, a library to print a component:
<ReactToPrint
trigger={() =>
<SqIconButton action={(e)=>e} color={"success"}>
<AiIcons.AiFillPrinter style={{color: 'black',fontSize:'1rem'}}/>
</SqIconButton>
}
content={() => componentRef.current}
/>
And my custom Button SqIconButton reads as follows:
export default function SqIconButton({children,color="primary",fontColor="#000000",action,tip="",disableElevation=false,sxstyle={},classes}){
return(
<Tooltip title={tip}>
<Button
color={color}
variant="contained"
onClick={action}
disableRipple={disableElevation}
className={`TBButton ${classes}`}
sx={sxstyle}
>
{children}
</Button>
</Tooltip>
)
}
In the examples of React To Print code for its trigger nothing is referencing "onclick" property on buttons, examples mostly look like this: <button>print this</button> and if I use this element it actually works. But my custom button does not work as is, so I think I have to pass the onclick event over my action custom property, so I'm trying with action={(e)=>e}, but the button does nothing when I press it.
Documentation says about trigger:
A function that returns a React Component or Element. Note: under the hood, we inject a custom onClick prop into the returned Component/Element. As such, do not provide an onClick prop to the root node returned by trigger, as it will be overwritten
So I don't know if onclick will be overwritten how could I pass this event to a child button component.
in react I am displaying products I.E.
{renderPosts.map((item, index) => (
...
now, in each product, there is a button to delete that product, inside a button I have onclick that calls sweetAlert to delete particular product:
<Button
color="danger"
simple
justIcon
onClick={warningWithConfirmMessage}
>
Everything works fine like that... but if I want to pass ID of the product that has to be deleted...
<Button
color="danger"
simple
justIcon
onClick={warningWithConfirmMessage(item.postId)}
>
Now I am having error:
Too many re-renders. React limits the number of renders to prevent an infinite loop.
How I can pass anything to function... anybody
Thanks in advance!
The new onClick handler you're passing is calling the warningWithConfirmMessage every time it renders. To pass the function as a handler function instead of calling it, use:
onClick={() => warningWithConfirmMessage(item.postId)}
This question already has answers here:
What is the difference between a function call and function reference?
(6 answers)
Closed 2 years ago.
I am new to react and learning it via reactjs.org "Tic Tac Toe" tutorial, i have question on below.
function Square(props){
return(
<button className="square"
onClick={() => props.onClick()}>
{props.value}
</button>
);
}
Can be written as
function Square(props){
return(
<button className="square"
onClick={props.onClick}>
{props.value}
</button>
);
}
However below is incorrect
function Square(props){
return(
<button className="square"
onClick={props.onClick()}>
{props.value}
</button>
);
}
Can someone explain why "onClick={props.onClick()}" is incorrect however both "onClick={() => props.onClick()}" and
"onClick={props.onClick}" are correct.?
When using "onClick={props.onClick()}" it compiles fine however react throws below error at run time.
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
onClick={props.onClick()}
This one means "immediately call props.onClick(), and pass it's result into the onClick prop". Assuming props.onClick returns undefined, you're passing undefined into the click handler, so nothing will happen when it's clicked.
onClick={() => props.onClick()}
This means "create a function with the text () => props.onClick() and pass it into the onClick prop". Later, when a click happens, the function will be run, which in turn will run props.onClick.
onClick={props.onClick}
This means "pass props.onClick into the onClick prop". Later, when a click happens, props.onClick will be run.
onClick={props.onClick()} is executing when the component is rendered.
onClick={() => props.onClick()} will be executed when the user click, but can be passed params directly, like this: onClick={() => props.onClick(this, id)}
onClick={props.onClick} will be executed when the user click, passing the event as a param. In this approach, you are passing a reference.
Related question: What is the difference between a function call and function reference?
I want to use history.push to link to another page on my React app upon a button click but when I use history.push, it gives me the error Unexpected use of 'history'.(no-restricted-globals)
<ExampleComponent handleClick={history.push('/path/to/page')} text={'something'} />
Inside the ExampleComponent, I have a button with an onClick handler that calls the handleClick props
<Button onClick={() => this.props.handleClick}>{this.props.text}</Button>
update
When you use ExampleComponent component there is a problem with the variable history. As this is globally reachable as windows.history. I think you call history.push the linter gives a warning if it is window.history or not.
I have on component which is stateless and it is used in both parent component
<div onClick={() => handleClick()}><div>
I have to add handle click function but only for one of them. I have one bool variable which is responsible for that e.g. shouldHandleClick.
So I need to write something like but it works for cases with props, strings etc. etc.
<div {shouldHandleClick ? onClick={() => handleClick()} : null}><div>
Do you have any ideas otherwise i will handle click in the second component which doesn`t need this handle click function
<div onClick={this.props.shouldHandleClick ? this.handleClick : null}><div>
And send shouldHandleClick with props to activate or deactivate click function.
It looks like you are almost there:
<div onClick={shouldHandleClick ? handleClick : null}></div>