'Storybook 6 - how to set array of objects?

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?

Solution 1:^[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>;
};

Solution 2:^[2]

using "@storybook/addon-knobs": "6.0.21", "@storybook/angular": "6.0.21",

I have an array of objects, that I pass as an @Input() links: Links[]; With this setup, you will be able to past any JSON object. Angular component:

export class HeaderComponent  {
  @Input() links: Link[] = [];
  @Output() navigate = new EventEmitter<any>();

  linkClicked(link: Link){
    this.navigate.emit(link);
  }
}

import { text, number, boolean, array, select, object } from '@storybook/addon-knobs';

import { HeaderComponent, Link } from './header.component';

export default {
  title: 'HeaderComponent'
}
let links: Link[] = [{name: "link one", route: ""}] 
export const primary = () => ({
  moduleMetadata: {
    imports: []
  },
  component: HeaderComponent,
  props: {
    links: object("links",links)
  }

})

Solution 3:^[3]

With 6.4.19 Storybook, you should map your options. Currently, @storybook/addon-knobs is deprecated.

  argTypes: {
    data: {
      control: {
        type: 'select',
        labels: {
          first: 'First Option',
          second: 'Second Option'
        }
      },
      options: ['first', 'second'],
      mapping: {
        first: {color: '#fa2dac', text: 'RSS'},
        second: {color: '#fa2dac', text: 'RSS'}
      }
    }
  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Freestyle09
Solution 2	katesky8
Solution 3	t_coding

'Storybook 6 - how to set array of objects?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]