React onClick function fires on render

Question

I pass 2 values to a child component     List of objects to display   delete function    I use a  map   function to display my list of objects like in the example given in react tutorial page   but the button in that component fires the onClick function  on render it should not fire on render time   My code looks like this   module exports   React createClass       render  function            var taskNodes   this props todoTasks map function todo               return                    lt div gt                       todo task                       lt button type  submit  onClick  this props removeTaskFunction todo   gt Submit lt  button gt                   lt  div gt                            this           return                lt div className  todo-task-list  gt                   taskNodes               lt  div gt                         My question is  why does onClick function fire on render and how to make it not to

User · Answer

JSX will evaluate JavaScript expressions in curly braces

In this case, this.props.removeTaskFunction(todo) is invoked and the return value is assigned to onClick

What you have to provide for onClick is a function. To do this, you can wrap the value in an anonymous function.

export const samepleComponent = ({todoTasks, removeTaskFunction}) => {
    const taskNodes = todoTasks.map(todo => (
                <div>
                    {todo.task}
                    <button type="submit" onClick={() => removeTaskFunction(todo)}>Submit</button>
                </div>
            );
    return (
        <div className="todo-task-list">
            {taskNodes}
        </div>
        );
    }
});

User · Answer

For those not using arrow functions but something simpler     I encountered this when adding parentheses after my signOut function      replace this  lt a onClick  props signOut    gt Log Out lt  a gt   with this  lt a onClick  props signOut  gt Log Out lt  a gt

User · Answer

Instead of calling the function  bind the value to the function   this props removeTaskFunction bind this  todo    MDN ref  https   developer mozilla org en docs Web JavaScript Reference Global objects Function bind

User · Answer

I had similar issue  my code was   function RadioInput props        return        lt div className  form-check form-check-inline  gt           lt input className  form-check-input  type  radio  name  inlineRadioOptions  id  props id  onClick  props onClick  value  props label  gt  lt  input gt           lt label className  form-check-label  htmlFor  props id  gt  props label  lt  label gt       lt  div gt             class ScheduleType extends React Component       renderRadioInput id label                id    inlineRadio  id          return               lt RadioInput                 id    id                  label    label                  onClick    this props onClick                gt                      Where it should be   onClick         gt  this props onClick      in RenderRadioInput  It fixed the issue for me

User · Answer

Because you are calling that function instead of passing the function to onClick  change that line to this    lt button type  submit  onClick       gt    this props removeTaskFunction todo     gt Submit lt  button gt      gt  called Arrow Function  which was introduced in ES6  and will be supported on React 0 13 3 or upper

User · Answer

The value for your onClick attribute should be a function  not a function call    lt button type  submit  onClick  function   removeTaskFunction todo    gt Submit lt  button gt

User · Answer

JSX is used with ReactJS as it is very similar to HTML and it gives programmers feel of using HTML whereas it ultimately transpiles to a javascript file      Writing a for-loop and specifying function as    this props removeTaskFunction todo   will execute the functions   whenever the loop is triggered        To stop this behaviour we need to return the function to onClick         The fat arrow function has a hidden return statement along with the bind   property  Thus it returns the function to OnClick as Javascript can   return functions too         Use -  onClick       gt    this props removeTaskFunction todo       which means-  var onClick   function       return this props removeTaskFunction todo     bind this

[javascript] React onClick function fires on render

Examples related to javascript

Examples related to reactjs

Examples related to button

Examples related to onclick

Examples related to dom-events