How to Load Data from .js file to React Component out of .map as individual data-CodePudding

I wanted to load few Data from .js file to React Component out of .map as individual data. From Data.js file title & Description data need to load after the mapping data how to call those values? Please Help

export const stockData = [
  {
    title: "Date Loader Demo",
    Description: "Date Loader Demo Description"
  }]

{stockData.title}
{stockData.Description}

https://codesandbox.io/s/load-data-from-date-file-to-component-le6bpv

CodePudding user response：

I saw your CodeSandBox project, In the data.js file you stored stockData as an array and you are calling stockData.title as if .title were a property of an object, that's wrong, you need to explicit the array index of object that contains the properties title and description.

You can simply fix using [0]

{stockData[0].title}
{stockData[0].Description}

Or using destructuring:

const [firstItem] = stockData
// ...
{firstItem.title}
{firstItem.Description}

If you need to wait mapping data be loaded you can use a logical condition, using .length property or another dependency if exists.