React.js: Почему может не рендериться компонент?

Question

[Lite_robot]

Привет,

Есть пара компонентов:
MessageList
pastebin.com/XNs3a3kv

import React, {Component} from 'react';
import Message from './Message.jsx';

export default class MessageList extends Component{
    render(){
        return (
        <div className="message-list">
            {
                this.props.asd.map((cur) => {
                    return (
                        
                        <Message id={cur.id} text={cur.text}/>

                    );
                })
            }

        </div>
    );
    }
}

Message
pastebin.com/3Qv0E2Bi

import React, {Component} from 'react';



export default class Message extends Component {
    render() {
        console.log(this.props);
        return (
            <div key={this.props.id} className="row" style={{borderBottom: 'solid black 1px'}}>
                <div className="col-lg-11">
                    {this.props.text }
                </div>
                <div className="col-lg-1">
                    {(new Date()).toLocaleTimeString()}
                </div>
            </div>
        );
    }
};

При включении Message в MessageList, компонент Message не отображается. Но если вместо включения Message, написать код из Message, то все отображается как и должно. Подскажите в чем может быть ошибка и как её исправить?

upd.#1
Оба компонента находятся в одной папке. console.log в компоненте Message , не отображается в консоли. Напомню что при переносе кода из Message в MessageList , данные отображаются.

Comments

[davidnum95]

может в пропсах ничего нет?

[Виталий Киренков]

Путь до компонента кривой?
Код не валидный? (где то ошибка в объявлении переменных)

Answer 1

[Lite_robot]

Проблема была в запущенном Firebug. Не знаю каким образом он влияет, но с выключеным Firebug , все рендерится.

Answer 2

[Максим]

Так же (плюс то, что вам уже ответели), возможно, что в компоненте ./Message.jsx неправильный export default

Если там указн export без default, то значит нужно импортировать с фигурными скобками, причем имя в импорте, должно совпадать с именем в экспорте. (например, import { Message } from ... )

p.s. приложите код компонента Message