Error in reactjs +materail-ui - reactjs

Question

I am getting this error while building a simple app which has two routes one to '/' and other to '/search'. I have used various components of material-ui.
The problem is when I route to '/search' the following error is thrown:
I have tried all necessary things but unable to figure out what's wrong?
I am just posting half of code here:
function capitalizeFirstLetter(string) {
28 | process.env.NODE_ENV !== "production" ? (0, _warning2.default)(typeof string === 'string', 'Material-UI: capitalizeFirstLetter(string) expects a string argument.') : void 0;
29 |
> 30 | return string.charAt(0).toUpperCase() + string.slice(1);
31 | } // weak
32 |
33 | function contains(obj, pred) {
View compiled
Typography
node_modules/material-ui/Typography/Typography.js:114
111 | other = (0, _objectWithoutProperties3.default)(props, ['align', 'classes', 'className', 'component', 'color', 'gutterBottom', 'headlineMapping', 'noWrap', 'paragraph', 'type']);
112 |
113 |
> 114 | var className = (0, _classnames2.default)(classes.root, classes[type], (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes['color' + (0, _helpers.capitalizeFirstLetter)(color)], color !== 'default'), (0, _defineProperty3.default)(_classNames, classes.noWrap, noWrap), (0, _defineProperty3.default)(_classNames, classes.gutterBottom, gutterBottom), (0, _defineProperty3.default)(_classNames, classes.paragraph, paragraph), (0, _defineProperty3.default)(_classNames, classes['align' + (0, _helpers.capitalizeFirstLetter)(align)], align !== 'inherit'), _classNames), classNameProp);
115 |
116 | var Component = componentProp || (paragraph ? 'p' : headlineMapping[type]) || 'span';
117 |
View compiled
mountIndeterminateComponent
node_modules/react-dom/cjs/react-dom.development.js:8032
8029 | warning(false, "The <%s /> component appears to have a render method, but doesn't extend React.Component. " + 'This is likely to cause errors. Change %s to extend React.Component instead.', componentName, componentName);
8030 | }
8031 | ReactCurrentOwner.current = workInProgress;
> 8032 | value = fn(props, context);
8033 | }
8034 | // React DevTools reads this flag.
8035 | workInProgress.effectTag |= PerformedWork;
View compiled
beginWork
node_modules/react-dom/cjs/react-dom.development.js:8221
8218 |
8219 | switch (workInProgress.tag) {
8220 | case IndeterminateComponent:
> 8221 | return mountIndeterminateComponent(current, workInProgress, renderExpirationTime);
8222 | case FunctionalComponent:
8223 | return updateFunctionalComponent(current, workInProgress);

Answer 1

I see in Typography.js that it use capitalizeFirstLetter for color and align.
Check if you inserted there something that is not a string.