Jim Jim - 3 months ago 27
React JSX Question

loading module inside redux connect

I'm trying to figure out what I did wrong, here's the scenario

Greeting.js



import React, { Component } from 'react';
import { connect } from 'react-redux';
import name from './name';

class SayGreeting extends Component {
componentDidMount() {
console.log(name);
}
render() {
return (
<div>
Good Morning to you, {name}
</div>
)
}
}

const mapStateToProps = ...
const mapDispatchToProps = ...

const Greeter = connect(
mapStateToProps,
mapDispatchToProps
)(SayGreeting)

export default Greeter;


name.js



import React from 'react';

const Name = () => (<div>Yoshie</div>);
export default Name;


when I log out "name", it logs out a connect function instead of the jsx that I expected:

function Connect(props, context) {
_classCallCheck(this, Connect);

var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));

_this.version = versio…


I wonder if I did anything wrong... thanks for the help!

Answer

have you try it like this,

EDIT: try import the name inside curly braces

import {Name} from './name'

class SayGreeting extends Component {
componentDidMount() {
  console.log(name);
}
render() {
  return (
    <div>
      Good Morning to you, <Name/>
    </div>
  )
 }
}