title: Nested Array Of Objects into Downloadable CSV in react
body: <p>I have the following Data which when downloaded can be viewed in an xls/csv format. I am using react-csv npm package which is displaying the name and description in same columns as opposed to different columns.</p>
  <p>I need some help in figuring out how to display data where Name, Description, and Roles are displayed in different columns as shown below.</p>
  <p>Data:-</p>
  <pre><code> const csvData = [
      {
          name: 'Data science training',
          description:
              'Data Science certification training',
          
         suggestedRoles: [
              { id: 16, category: 'DEVELOPER', name: 'Data Engineer' },
              { id: 17, category: 'DEVELOPER', name: 'Data Scientist' }]
          },{
           name: 'AWS',
          description:
              'AWS certification training',
          
         suggestedRoles: [
              { id: 16, category: 'DEVELOPER', name: 'Cloud Engineer' },
              { id: 17, category: 'DEVELOPER', name: 'Network Engineer' }]
  }],
  </code></pre>
  <p>Expected Output:-</p>
  <pre><code>Name                        Description                                    RoleName
  Data Science Training       Data Science Certification Training             Data Engineer
                                                                              Data Scientist
  AWS Training                AWS Certification Training                      Cloud Engineer
                                                                              Network Engineer
  </code></pre>
  <p>Current Output:-</p>
  <pre><code>Name                                    Description                                                         RoleName
  Data Science Training,AWS Training         Data Science Certification Training, AWS Certification Training    Data Engineer,Data Scientist,Cloud Engineer,Network Engineer
  </code></pre>
  <p>Code:-</p>
  <pre><code>export const ReactCsv = () =&gt; {
      const createCsvFileName = ()=&gt; `data_${moment().format()}.csv`;
      const headers = [
          { label: 'Name', key: 'name' },
          { label: 'Description', key: 'description' },
          { label: 'SuggestedRoles', key: 'suggestedRoles' }
      ];
  
      const data = [
          {
              name: csvData.map((_)=&gt;_.name),
              description: csvData.map((_)=&gt;_.description),
              suggestedRoles: csvData.map((_)=&gt;_.suggestedRoles.map((role)=&gt;role.name)),
          }
      ];
  
      return (
          &lt;CSVLink
              data={data}
              headers={headers}
              filename={createCsvFileName()}
              target=&quot;_blank&quot;
              style={{ textDecoration: 'none', outline: 'none', height: '5vh' }}
          &gt;
              &lt;Button variant=&quot;contained&quot; color=&quot;secondary&quot; style={{ height: '100%' }}&gt;
                  Download CSV
              &lt;/Button&gt;
          &lt;/CSVLink&gt;
      );
  };
  </code></pre>