Danny Dyer Danny Dyer - 1 month ago 14
React JSX Question

React - console log gives blank object

Im new to react and im trying to import a list of objects from a js file and set them as the inital state of my app like so:

import allSamples from './reducers/reducerSamples';

var App = React.createClass({
getInitialState () {
return {
samples:{allSamples},
}
},
render () {
...


Here is my js file with object:

var allSamples = [
{
id:"1",
sampleName:'Deep House Base',
sampleFamily:'Deep House Pack',
parentCategory:"bass",
subCategory:"house bass",
uploader:"Ben",
soundSource:"../../samplesWav/bd_909dwsd.wav",
tags:[
"house","ghouse","tech-house","rad"
]
},
{
id:"2",
sampleName:'Deep House Base',
sampleFamily:'Deep House Pack',
parentCategory:"bass",
subCategory:"house bass",
uploader:"Ben",
soundSource:"../../samplesWav/bd_chicago.wav",
tags:[
"house","ghouse","tech-house","rad"
]
},
{
id:"3",
sampleName:'Deep House Base',
sampleFamily:'Deep House Pack',
parentCategory:"bass",
subCategory:"house bass",
uploader:"Ben",
soundSource:"../../samplesWav/bd_dandans.wav",
tags:[
"house","ghouse","tech-house","rad"
]
},
{
id:"4",
sampleName:'Deep House Base',
sampleFamily:'Deep House Pack',
parentCategory:"bass",
subCategory:"house bass",
uploader:"Ben",
soundSource:"../../samplesWav/bd_deephouser.wav",
tags:[
"house","ghouse","tech-house","rad"
]
},
{
id:"5",
sampleName:'Deep House Base',
sampleFamily:'Deep House Pack',
parentCategory:"bass",
subCategory:"house bass",
uploader:"Ben",
soundSource:"../../samplesWav/bd_diesel.wav",
tags:[
"house","ghouse","tech-house","rad"
]
},
{
id:"6",
sampleName:'Deep House Base',
sampleFamily:'Deep House Pack',
parentCategory:"bass",
subCategory:"house bass",
uploader:"Ben",
soundSource:"../../samplesWav/bd_dropped.wav",
tags:[
"house","ghouse","tech-house","rad"
]
}
]


The state in React dev tools says "empty object", am I not importing the file properly? Can't find anyone else with similar issues SO

Answer

A couple of things that can be going on here:

  • try console.log(allSamples); above var App .. to make sure you're pulling it in correctly.

  • make sure the { samples: {allSamples} } syntax is supported by your transpiler. Or just say { samples: allSamples } to see if that works.

Comments