functions passed as props are invoked regardless - reactjs

Question

I'm developing an application that has the following component hierarchy (courtesy ProReact)
KanbanContainer => KanbanBoard => List => Card => CheckList
KanbanContainer contains methods that need to be passed down to the CheckList component (as that component has all the ui controls). The methods in the KanbanContainer are defined as follows
class KanbanBoardContainer extends Component {
state = { cards: [] };
componentDidMount() {
this.setState({ cards: API.getTasks() });
}
addTask = (cardId, taskName) => {
console.log(taskName, " invoked for cardId =", cardId);
};
deleteTask = (cardId, taskId, taskIndex) => {
console.log("deleteTask invoked for cardId = ", cardId);
};
toggleTask = (cardId, taskId, taskIndex) => {
console.log("toggleTask invoked fpr cardId = ", cardId);
};
render() {
return (
<KanbanBoard
cards={this.state.cards}
taskCallbacks={{
toggleTask: this.toggleTask,
addTask: this.addTask,
deleteTask: this.deleteTask
}}
/>
);
}
}
In all the other components, the taskCallbacks is simply passed on via props. For example:
class List extends React.Component {
render() {
let cards = this.props.cards.map(c => {
return (
<Card
id={c.id}
key={c.id}
title={c.title}
description={c.description}
color={c.color}
tasks={c.tasks}
taskCallbacks={this.props.taskCallbacks}
/>
);
});
return (
<div className="list">
<h1>{this.props.title}</h1>
{cards}
</div>
);
}
}
In the final component, the functions passed in via props are attached to the ui controls such as checkbox and a link.
class CheckList extends Component {
checkInputKeyPress = event => {
if (event.key === "Enter") {
this.props.taskCallbacks.addTask(this.props.cardId, event.target.value);
event.target.value = "";
}
};
render() {
const { deleteTask, toggleTask } = this.props.taskCallbacks;
let tasks = this.props.tasks.map((t, index) => (
<li key={t.id}>
<input
type="checkbox"
name=""
id=""
defaultChecked={t.done}
onChange={toggleTask(this.props.cardId, t.id, index)}
/>{" "}
{t.name}{" "}
<a
href="#"
onClick={deleteTask(this.props.cardId, t.id, index)}
/>
</li>
));
return (
<div>
<ul>{tasks}</ul>
<input
type="text"
placeholder="Key in a task and hit enter"
onKeyPress={this.checkInputKeyPress}
/>
</div>
);
}
}
However when I load the application, the functions get called "on load" and nothing happens when the controls are clicked. Only the addTask() gets called when you type in the textfield and hit enter. What am I missing?

Answer 1

By using:
onClick={deleteTask(this.props.cardId, t.id, index)}
The function will be invoked in place. Try switching for:
onClick={() => deleteTask(this.props.cardId, t.id, index)}
For clarity, deleteTask is a reference to a function, deleteTask() invokes a function. In a situation where you need to invoke the function (for example, to pass arguments) then the pattern above is an anonymous function that calls your deleteTask function.

Answer 2

Create a function in the last component that calls the prop function with the appropriate arguments. That is, don't invoke a function directly from onClick/onChange, becase those props expect a reference to a function, not the result of invoking a function.
Most importantly, you should check out the Context API in order to avoid passing down so many props.