ReactJS: adding my own props to another component

Question

Is it possible (or even a good idea) to add my own props to another React component, like:

<SomeCustomComponent myOwnParam={handler}>

Possible, yes, but if you're not in control of it, the component won't use the custom prop you're passing. — Henrik Andersson, Dec 08 '15 at 17:08
What are you trying to accomplish by doing this? What is `SomeCustomComponent` supposed to do with `myOwnParam`? — Kyeotic, Dec 08 '15 at 17:10
I'm trying to extend it with my own functionality...maybe I'm thinking something like this? http://stackoverflow.com/questions/25720595/extending-react-js-components — redconservatory, Dec 08 '15 at 17:51

score 4 · Accepted Answer · answered Dec 08 '15 at 17:22

As mentioned by Tyrsius, it really depends on the implementation of SomeCustomComponent. If the component does not use the myOwnParam prop anywhere, passing it won't accomplish anything. On the other hand, some React components might use JSX spread attributes to reference props not directly enumerated in the code.

As an example, the following implementation of SomeCustomComponent would pass your myOwnParam prop down to its child div:

class SomeCustomComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    var {customComponentProp, ...other } = this.props;
    return (
      <div customComponentProp={customComponentProp} {...other}></div>
    );
  }
}

So again, it depends on the implementation of SomeCustomComponent what will happen.

See Transferring Props documentation for more details: https://facebook.github.io/react/docs/transferring-props.html

score 2 · Answer 2 · answered Dec 08 '15 at 17:10

This won't cause an error, but unless SomeCustomComponent is looking for this prop nothing will be done with it. It is possible for a component to loop over its props, so this could be a usable strategy, but I am not sure what you would do with it. You couldn't define anything but iteration logic over properties that you don't know in advance.

ReactJS: adding my own props to another component

2 Answers2