I'm getting this warning when trying to style my component:
react-dom.js:18121
Warning: a
divtag (owner:Letter) was passed a numeric string value for CSS propertyfontSize(value:32) which will be treated as a unitless number in a future version of React.
my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>React! React! React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<style>
.myClass {
padding: 50px;
background-color: #EEE;
}
</style>
</head>
<body>
<div class="myClass"></div>
<script type="text/babel">
var Letter = React.createClass({
render: function() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: "#ffde00",
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: "32",
textAlign: "center"
};
return (
<div style={letterStyle}>
{this.props.children}
</div>
);
}
});
ReactDOM.render(
<div>
<Letter>A</Letter>
<Letter>E</Letter>
<Letter>I</Letter>
<Letter>O</Letter>
</div>,
document.querySelector(".myClass")
);
</script>
</body>
</html>
The output result:
Is there a way to avoid this warning ?
You haven't specified units for your fontSize, padding, and margin. Make your letterStyle object like this:
The React team is just warning you that although the "px" suffix will currently be appended to the fontSize property automatically (the same as it currently does for the padding and margin properties in your object), that won't be the case in a future version of React. They are warning you in advance to always specify the unit you want (i.e. - px, em, %, etc.).