I wonder what is preferred prop naming convention by ReactJS munity ?

<TodoList todos={todos} onRemoveTodo={removeTodo} onCheckTodo={checkTodo} />

or

<TodoList items={todos} onRemoveItem={removeTodo} onCheckItem={checkTodo} />

or any other way ??

Thanks!

I wonder what is preferred prop naming convention by ReactJS munity ?

<TodoList todos={todos} onRemoveTodo={removeTodo} onCheckTodo={checkTodo} />

or

<TodoList items={todos} onRemoveItem={removeTodo} onCheckItem={checkTodo} />

or any other way ??

Thanks!

• javascript
• reactjs
• naming-conventions
• naming

3 Answers 3

I don't think there is an iron-clad convention for naming props. You can look at the following articles:

• How to name props for React ponents
• React ponents naming convention

It ultimately depends on you, your team and how well you can document for both you and other developers on the project.

There's no preferred convention. Prop naming is a matter of taste and may vary depending on the project for the sake of consistency.

If there's no ambiguity in callback prop names, it likely should be onRemove, not onRemoveTodo or onRemoveItem. Just because the suffix provides no useful information and takes more characters to type.

<TodoList todos={todos} onRemoveTodo={removeTodo} onCheckTodo={checkTodo} />

or

<TodoList items={todos} onRemoveItem={removeTodo} onCheckItem={checkTodo} />

I am of the opinion that TodoList already explains (or should explain) itself by the very ponent name, so the the order of the props used when calling the ponent should be the order of importance in terms of rendering and UX.

The ponent must be supplied with some data (list of todo-itmes) so that should be the first prop to be written. I wouldn't name it todos but probably simply name it data, so it's clear that this is the data for that ponent.

I want to keep the terminology as simple as possible, and consistent across ponents, so all ponents which requires data (~90% of times an Array. Rarely an Object) should have a prop named data. If you would have named it todos than you would have to think of a new name for every ponent, and why waste time on that on thinking of names?