React and React Komposer and containers


#1

I’m using react and react komposer. Im getting:
Exception from Tracker recompute function: debug.js:41 TypeError: TeckStack.map is not a function at ReadStepsListTop (ReadStepsListTop.jsx:8)

This is my component

import React from 'react';

export const ReadStepsListTop = ({TeckStack}) => (
            <div>
                {TeckStack.map(({_id,teckstack}) => (
                    <h4>{teckstack}</h4>
                ))}    
            </div>  
)

and this is its container

import React from 'react';
import { composeWithTracker } from 'react-komposer';
import {ReadStepsListTop} from './ReadStepsListTop.jsx';
import { DocHead } from 'meteor/kadira:dochead';
import CircularProgress from 'material-ui/CircularProgress';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

function composer(props, onData) {
  const handle = Meteor.subscribe('singletechstack', props._id);
  
  if(handle.ready()) {
    const TeckStack = TechStack.findOne({_id: props._id});
    onData(null, {TeckStack});

    // Make our blog posts SEO friendly
    // DocHead.setTitle(techstacksingle.teckstack);
    // DocHead.addMeta({
    //   name: 'description', content: project.projectdescription
    // });
  }
};

const darkMuiTheme = getMuiTheme(darkBaseTheme);

const MyLoading = () => (<div style={{width:'90%', position:'relative'}}>
      <MuiThemeProvider muiTheme={darkMuiTheme}>
      <div style={{margin:'auto', right:0, left:0, width:300, position:'relative'}}>
        <p style={{textAlign:'center'}}><CircularProgress size={1.5} /></p>
      </div>
        
      </MuiThemeProvider>            
          </div>);
export default MyLoading;

export default composeWithTracker(composer,MyLoading )(ReadStepsListTop);

Where could I have gone wrong


#2

I think you might need to import the TechStack collection in your container and then give that variable a different name so it does not interfere with your collection name.


#3

Ive dont that still nothing’s changed


#4

Maybe try taking the default export of the loading out since you are exporting again right after that. I don’t think you can have two default exports in the same file.


#5

You are using findOne() which returns an object - objects don’t have a native map method.


#6

You are so right. Ive understood my error now. Thank you