CODEWITHSUNDEEP
reactjs
Daltron
Daltron

Reputation: 1866

ReactJS: Two props and checking propType

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!

Upvotes: 0

Views: 323

Answers (1)

icc97
icc97

Reputation: 12793

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
}

Upvotes: 1

Related Questions