React call JSON data with string

Question

import AsukaData from './info/AsukaData.json'
import JinData from './info/JinData.json'

~~~~

const CharArray = [
  'Jin', 'Asuka'
]
{CharArray.map((element,index)=>(
          <Route path={`/${element}`}><CharPage Data={`${element}Data`}/></Route>
     ))}

I want to call JSON data(JinData, AsukaData) with string, but don't know how to do..

Data={${element}Data} is recognized as string. And I want it to be json that is imported above.

Your question not clear, kindly update it with explaining what exactly you want to achieve. — Pavan
– Pavan, Commented Feb 4, 2021 at 6:01

Drew Reese · Accepted Answer · 2021-02-04 06:16:01Z

1

Issue

Using the backticks indicates string interpolations/templates.

Data={`${element}Data`}

This takes the string value from the array, and injects and returns a new string value passed to the Data prop.

Solution

If you simply want to map the imported JSON objects then I suggest placing them in the array. Use an object to provide the path key, and the JSON data payload.

import AsukaData from './info/AsukaData.json'
import JinData from './info/JinData.json'

...
const charArray = [
  { path: 'Jin', data: JinData },
  { path: 'Asuka', data: AsukaData }
];

{charArray.map(({ path, data }) => (
  <Route key={path} path={`/${path}`}>
    <CharPage Data={data} />
  </Route>
))}

edited Feb 4, 2021 at 6:16

answered Feb 4, 2021 at 6:04

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anshuraj · Accepted Answer · 2021-02-04 06:03:17Z

1

Use an object instead of array to map data with keys

const DataMap = {
  'Jin': JinData, 
  'Asuka': AsukaData
}
{Object.keys(DataMap).map((element,index)=>(
     <Route path={`/${element}`}><CharPage Data={DataMap[element]}/></Route>
))}

answered Feb 4, 2021 at 6:03

anshuraj

3421 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

React call JSON data with string

2 Answers 2

Issue

Solution

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Issue

Solution

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related