---

This section details on the original issue you should resolve

<issue_title>Add rule to ensure className and event handlers are merged properly</issue_title>
<issue_description>- Follow up to #437

From @joshblack:

Would it be possible to have the rule (or a follow up rule?) that helps people understand when something may not be merged correctly. For example:

-<Example {...rest} className="..." />
+<Example {...rest} className={clsx(className, '...')} />
-<Example {...rest} onClick={() => {}} />
+<Example {...rest} onClick={compose(onClick, () => {})} />

It would be helpful to know in these situations that we have not merged rest correctly. My guess is that it would be too hard in eslint world to know what rest is but figured I'd ask

---

Added by @siddharthkp:

We probably need to check if there is className or event handlers expected in the props and only then suggest to merge them

---

Implementation plan:

• Create 2 new rules in src/rules in the same style as other files in that directory
• Write tests for these in src/rules/__tests__
• Add files for documentation in docs/rules
• Don't blindly add this in every file, first check if there is className or event handlers expected from the props </issue_description>

Comments on the Issue (you are @copilot in this section)