Search code examples
arraysreactjsstorybook

Nesting an Array in Storybook React


I'm struggling to pass values to my nested array in Storybook js. What's the proper way to write this?

The component:

{options.map(item => {
    return <div id={item.id}>
            <div>…</div>
            <div className="ml-2">
                {actions.map(subitem => {
                    return <Button
                            id={subitem.id}
                        />
                })}
            </div>
    </div>
})}

The story:

Basics.args = {
    options: [
        {
            id: 'a',
            actions: [
                {
                  id: ‘b’,
                },
            ]
        },

Solution

  • actions is not defined in your code. Since actions is a property of the item object you should use

    item.actions.map 
    

    I have attached a code snippet for your reference.

      const arr = {
       options: [
            {
                id: 'a',
                actions: [
                    {
                      id: 'b',
                    },
                ]
            } ]
      }
    
    arr.options.map(item=> item.actions.map(subitem => console.log(subitem.id)))