Jiew Meng Jiew Meng - 7 months ago 15
Javascript Question

React Warning: ReactMount: Root element has been removed from its original container. New container: [object HTMLDivElement]

I am getting the error


Warning: ReactMount: Root element has been removed from its original container. New container: [object HTMLDivElement]


Seems like something is replacing the DOM node? But not sure where the mistake is. I do not set innerHTML anywhere I can see ...

Code (GitHub)

I get this error when I add an expense. Code I think maybe relavent below:

container/addExpenseDialog.jsx
(where
addExpense
action is dispatched)

import {connect} from 'react-redux';
import AddExpenseDialogPresentation from '../presentation/expenseDialog.jsx';
import {closeDialog, addExpense} from '../../actions/index.js';

const mapStateToProps = (state) => {
return {
opened: state.expenseDialog
};
}

const mapDispatchToProps = (dispatch) => {
return {
doClose: () => dispatch(closeDialog()),
// I dispatch addExpense here
doAdd: (params) => dispatch(addExpense(params)),
};
}

const AddExpenseDialog = connect(
mapStateToProps,
mapDispatchToProps
)(AddExpenseDialogPresentation);

export default AddExpenseDialog;


actions/index.js


export const addExpense = (expense) => {
return Object.assign({}, expense, {
type: 'ADD_EXPENSE'
});
};


reducers/expenses.js

let id = 1;

const expense = (state, action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return {
id: id++,
name: action.name,
category: action.category,
cost: action.cost
}
default:
return state;
}
};

const expenses = (state = [], action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return [
...state,
expense(undefined, action)
];
default:
return state;
}
};

export default expenses;


container/expensesList.jsx

import {connect} from 'react-redux';
import ExpensesListPresentation from '../presentation/expensesList.jsx';

const mapStateToProps = (state) => {
return {
expenses: state.expenses
};
}

const mapDispatchToProps = (dispatch) => {
return {};
}

const ExpensesList = connect(
mapStateToProps,
mapDispatchToProps
)(ExpensesListPresentation);

export default ExpensesList;


presentation/expensesList.jsx


import React from 'react';
import Expense from './expense.jsx';
import {DataTable} from 'react-mdl';
import {TableHeader} from 'react-mdl/lib/DataTable';

const ExpensesList = ({expenses}) => (
<DataTable rows={expenses} shadow={0}>
<TableHeader name="category">Category</TableHeader>
<TableHeader name="name">Name</TableHeader>
<TableHeader name="cost">Cost</TableHeader>
</DataTable>
)

export default ExpensesList;


Where might I have gone wrong?

Update

Strangely I have dispatched add expense in
index.jsx
for some test data, and they are added fine ...

store.dispatch(addExpense({ name: 'X', category: 'food', cost: 10 }))
store.dispatch(addExpense({ name: 'Y', category: 'test', cost: 20 }))
store.dispatch(addExpense({ name: 'Z', category: 'food', cost: 30 }))


Ah!... looks like its a problem with
mdl-js-layout
... when I remove it, layout does go off, but I dont get the error ...

Answer

Ok answering and closing this. Its actually a problem with MDL, more specifically mdl-js-layout class. If I remove that layout breaks, but the error also stops.