Depreciation Warning <Component>.defaultProps

[sarojshakya01]

I am encountering following irritating warning in my console. Has it been addressed in the beta version? Will be it be updated in the future release?
"Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead."

[masahmad71]

for those who are looking for replacement, take a look at @uiw/react-color.

[Taimoor79]

@sarojshakya01 open console and check file name like in my case

Then click on the file name and you get to know where the actual issue is, like in my case check the cursor position

Then hover over the file name and you will get file path and then open file in any editor and remove default props and assign their value directly

Library code before:
`var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import React, { isValidElement } from 'react';
import reactCSS from 'reactcss';
import * as checkboard from '../../helpers/checkboard';

export var Checkboard = function Checkboard(_ref) {
var white = _ref.white,
grey = _ref.grey,
size = _ref.size,
renderers = _ref.renderers,
borderRadius = _ref.borderRadius,
boxShadow = _ref.boxShadow,
children = _ref.children;

var styles = reactCSS({
'default': {
grid: {
borderRadius: borderRadius,
boxShadow: boxShadow,
absolute: '0px 0px 0px 0px',
background: 'url(' + checkboard.get(white, grey, size, renderers.canvas) + ') center left'
}
}
});
return isValidElement(children) ? React.cloneElement(children, _extends({}, children.props, { style: _extends({}, children.props.style, styles.grid) })) : React.createElement('div', { style: styles.grid });
};

Checkboard.defaultProps = {
size: 8,
white: 'transparent',
grey: 'rgba(0,0,0,.08)',
renderers: {}
};

export default Checkboard;`

Library Code After:
`var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import React, { isValidElement } from 'react';
import reactCSS from 'reactcss';
import * as checkboard from '../../helpers/checkboard';

// Checkboard.defaultProps = {
// size: 8,
// white: 'transparent',
// grey: 'rgba(0,0,0,.08)',
// renderers: {}
// };

export var Checkboard = function Checkboard(_ref) {
var white = 'transparent',
grey = 'rgba(0,0,0,.08)',
size = 8,
renderers = {},
borderRadius = _ref.borderRadius,
boxShadow = _ref.boxShadow,
children = _ref.children;

var styles = reactCSS({
'default': {
grid: {
borderRadius: borderRadius,
boxShadow: boxShadow,
absolute: '0px 0px 0px 0px',
background: 'url(' + checkboard.get(white, grey, size, renderers.canvas) + ') center left'
}
}
});
return isValidElement(children) ? React.cloneElement(children, _extends({}, children.props, { style: _extends({}, children.props.style, styles.grid) })) : React.createElement('div', { style: styles.grid });
};

export default Checkboard;`

Then build your project again using yarn build or npm run build

[Taimoor79]

@masahmad71 I installed this library @uiw/react-color and then got to know that its have a lot of errors like when change alpha/opacity of color then this library returns NaN and I am unable to change color.