Provide an array of components as property

[robbinjanssen]

Hi,

I'm trying to figure out how to provide an array of components as a property, for example I have a component:

Item.js

import React, { PropTypes } from 'react';

const Item = ({ title }) => (
  <li className="item">{title}</li>
);

Item.propTypes = {
  title: PropTypes.string.isRequired,
};

export default Item;

Group.js

import React, { PropTypes } from 'react';

const Group = ({ title, items }) => (
  <div className="group">
    <h1>{title}</h1>
    <ul className="content">{items}</ul>
  </div>
);

Group.propTypes = {
  title: PropTypes.string.isRequired,
  items: PropTypes.arrayOf(PropTypes.instanceOf(Item)).isRequired,
};

export default Group;

How would I demo this? I've tried:

<Demo
  target={Group}
  props={{
    title: P.string('Awsome Group'),
    items: [
      <Item title="item 1" />,
      <Item title="item 2" />,
    ],
  }}
/>

[rpominov]

Hey!

Did you try items: P.constant([<Item ... />, <Item ... />])?

[robbinjanssen]

@rpominov thanks! That works 👍 Only rendering of the demo code looks a bit messy:

input:

    <Demo
      target={PageHeader}
      props={{
        title: P.string('This is a page header'),
        actions: P.constant([
          <button className="btn btn-primary">One</button>,
          <button className="btn btn-default">Two</button>,
        ]),
      }}
    />

Output:

<PageHeader
  title="This is a page header"
  actions={[<button
      className="btn btn-primary"
    >
      One
    </button>, <button
      className="btn btn-default"
    >
      Two
    </button>]}
  className={false}
/>

Is there something that I can do to make it look more natural/pretty?

[rpominov]

I think codeIndentDepth is responsible for that. Although not sure. Try to do something like this:

<Demo
      codeIndentDepth={2}
      target={PageHeader}
      props={{
        title: P.string('This is a page header'),
        actions: P.constant([
          <button className="btn btn-primary">One</button>,
          <button className="btn btn-default">Two</button>,
        ]),
      }}
    />

Try to play with codeIndentDepth value.

[robbinjanssen]

@rpominov thanks I'll give it a go!