Question about props?

Question

React

Is it correct to pass plural properties in this way ?

var User = React.createClass({
    getInitialState: function(){
      return {
        name: 'Jack London',
        listTitle: 'Grate List of Friends',
        friends: ['Oscar Wilde','Dan Braun', 'Bram Stoker']
      }
    },
    render: function(){
      return (
        <div>
          <h1>{this.state.name}</h1>
          <FriendList names={this.state.listTitle} mainName={this.state.name} anotherProp={this.state.prop}/>
        </div>
      )
    }
  });

  var FriendList = React.createClass({
      render: function(){
        return (
          <div>
            <h3>{this.props.mainName}</h3>
            <h3>{this.props.names}</h3>
            <h3>{this.props.anotherProp}</h3>
          </div>
        )
      }
  });

It's just that if we say there are 15 data fields that I want to pass through the props below, then why should they all be specified on one line in the call to the child element tag?

Answer 1

If there are many properties, then it is better to do this:

var config = {
   names:  this.state.listTitle,
   mainName: this.state.name,
   anotherProp: this.state.prop
};
// ...
<FriendList config={config} />
// ...

or broken down into smaller components.