ReactJS: Two props and checking propType

Question

Situation:

<Component>
    child
</Component>

What I want to do:

<Component>
<div></div>
{this.function()} // loads array of components
</Component>

Problem:

I can only specify one propType? How can I allow two different propTypes into one?

Thanks!

Could you be more clear what kind of props are you trying to pass? — Shota, Mar 15 '17 at 20:25
Perhaps [**this**](http://stackoverflow.com/a/40302064/2030321) might be of help to you? — Chris, Mar 15 '17 at 20:31
I am trying to pass in a func type and node type into one specified prop location — Daltron, Mar 15 '17 at 20:32
@Daltron you wouldn't be passing in a function type you'd be passing in whatever returns from that function. Unless `this.function()` returns a function. — icc97, Mar 15 '17 at 20:37

score 1 · Accepted Answer · edited May 23 '17 at 12:00

I believe what you're trying to do should be fine. See this code from the Meteor react tutorial:

renderTasks() {
  return this.getTasks().map((task) => (
    <Task key={task._id} task={task} />
  ));
}

render() {
  return (
    <div className="container">
      <header>
        <h1>Todo List</h1>
      </header>

      <ul>
        {this.renderTasks()}
      </ul>
    </div>
  );
}

You could just as easily modify render() to be:

render() {
  return (
    <div className="container">
      <header>
        <h1>Todo List</h1>
      </header>

      <ul>
        <Task task={this.props.myTask} />
        {this.renderTasks()}
      </ul>
    </div>
  );
}

Edit: in reply to your comment - yes you can specify alternate PropTypes as children. See this other answer:

static propTypes = {
    children: React.PropTypes.oneOfType([
        React.PropTypes.arrayOf(React.PropTypes.node),
        React.PropTypes.node
    ]).isRequired
}

Yeah, it works, but I also want to set the PropTypes. How do I do that if I have two different types of props? — Daltron, Mar 15 '17 at 20:47
@Daltron I've updated my answer - yes you can have multiple propTypes — icc97, Mar 15 '17 at 20:56

ReactJS: Two props and checking propType

1 Answers1