Storybook 6 - how to set array of objects?

Question

I want to pass data props for my Badge component and I have problem with array method from addon-knobs library. Data prop is an array of objects and I am trying to pass it like this:

const data = [
  object('First', {color: '#fa2dac', text: 'RSS'}),
  object('Second', {color: '#fa2dac', text: 'RSS'}),
];

Which gives me result that I have 2 fields (first and second) but when I want to change values inside they don't update on screen.

Second try:

const data = array('List of items', [
  object('First', {color: '#fa2dac', text: 'RSS'}),
  object('Second', {color: '#fa2dac', text: 'RSS'}),
]);

Which gives me same result but instead of 2 I am getting 3 fields and the third one has got value [object Object]

And third try:

const data = array('List of items', [
  {color: '#fa2dac', text: 'RSS'},
  {color: '#fa2dac', text: 'RSS'},
]);

Which gives me only filed with [object Object]

How to add knobs with array of objects and have fully working updating?

Answer 1

I moved data array into component and it works perfect now. The only thing I have noticed that array of objects must be passed with object method and now it works and refreshes the page.

export const Primary = () => {
  const data = object('List of items', [
    {color: '#fa2dac', text: 'RSaS'},
    {color: '#fa2dac', text: 'RSaS'},
  ]);
  return <Badge data={data}></Badge>;
};