LOKI LOKI - 1 month ago 12
React JSX Question

how to fix unknown prop zdepth warning when using with reactjs , material ui?

warning.js:36Warning: Unknown prop

zDepth
on tag. Remove this prop from the element.

I am trying to render a . But it is showing the above error. Can any one help please ?

import React, { Component } from 'react';
import Divider from 'material-ui/Divider';
import paper from 'material-ui/Paper';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';

export default class EmploymentContent extends Component {
getChildContext() {
return { muiTheme: getMuiTheme(baseTheme) };
}

render() {
return (
<paper zDepth={4}> <ul className="scroll"> </paper>
...

Answer

You're seeing this warning because you are using the Paper component with lowercase and React treats these lowercase tags as built-in components.

All you need to do is import and use it as Paper, starting with the capital letter.

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

You can see it here https://facebook.github.io/react/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

There is also an issue open https://github.com/facebook/react/issues/7848 to add it on the unknown-props warning page.