Property Type Validation in React.js Stateless Functions? about eslint-config-standard-react

[cesarandreu]

You can certainly do propType validation on pure function components:

import React, { PropTypes } from 'react'

Foo.propTypes = {
  bar: PropTypes.string.isRequired
}

export default function Foo ({ bar }) {
  return (
    <div className='Foo'>
      Foo is {bar}
    </div>
  )
}

I find it very useful. It forces you to declare your component's API up-front.

[dcousens]

While I would put Foo.propTypes after the export, @cesarandreu is 100% correct in that this is a solved problem.

[jprichardson]

@cesarandreu thank you, I wasn't aware of that!

[hxpaul]

This won't allow "props" that we wouldn't normally declare such as "key" to be passed in will it?

[dcousens]

@hxpaul what do you mean?
This behaves as any other definition of propTypes would.

[hxpaul]

Think I might be answering my own question as I try and explain the problem. Here's a quick (fake) example, so hope I've not left a synax error in here

In @cesarandreu's example above this wouldn't work would it?

['a', 'b', 'c'].map((bar, index) => {
  return <Foo bar={bar} key={index} />;
})

If I do this, it doesn't lint, but if I were to pass in key (say I'm calling this in a loop) it'll be accepted and used with no warnings. This works but doesn't lint:

const Anchor = (props) => {
  props.className = 'foo';
  return (
    <a {...props}>
      {children}
    </a>
  );
};
Anchor.propTypes = {
  children: React.PropTypes.any.isRequired
};
// <Anchor>hey</Anchor> renders <a class="foo" data-reactid=".0">hey</a>
// <Anchor key="bar">hey</Anchor> renders <a class="foo" data-reactid=".0.bar">hey</a> or similar

if I desctructure my props I have to explicitly name key now. Not a problem now I say it out loud, but I didn't have to think about key before, someone could just use it.

const Anchor = ({ children, href, key, onClick}) => {
  return (
    <a className="foo" href={href} key={key} onClick={onClick}>
      {children}
    </a>
  );
};

I've maybe stumbled into the wrong repo with my comments here, if so apologies, was googling for "Property Type Validation in React.js Stateless Functions"

[dcousens]

key is explicitly implicitly handled by react? Are you saying react throws a warning right now if you don't define it?

Perhaps it has an implicit propType?

[hxpaul]

maybe I'm wrong, I couldn't see how key could work with destructured props as in cesarandreu's example, say

['a', 'b', 'c'].map((bar, index) => {
  return <Foo bar={bar} key={index} />;
})

[dcousens]

@hxpaul I don't think you'll even receive key in props unless you define it in the propTypes. YMMV, been a while since I've tried that.