using ESLing plugin for react I got confused in destructuring and prop types validation. in class like below
class Game extends Component {
componentWillMount() {
this.props.createNewPlayer(); // Must use destructuring props assignment (react/destructuring-assignment)
}
render() {
const { players } = this.props; // 'players' is missing in props validation (react/prop-types)
const count = Object.keys(players).length;
return (...);
}
}
GameInit.propTypes = {createNewPlayer: PropTypes.func.isRequired};
const mapStateToProps = state => ({players: state.players});
export default connect(mapStateToProps,{ createNewPlayer })(Game);
so if I re-write destructure of the first part to
componentWillMount() {
const {createNewPlayer}=this.props; // 'createNewPlayer' is already declared in the upper scope. (no-shadow)
createNewPlayer();
}
and for destructure of player if I re-write proptypes as
GameInit.propTypes = {
createNewPlayer: PropTypes.func.isRequired,
players: PropTypes.object.isRequired, // Prop type `object` is forbidden (react/forbid-prop-types)
};
what is the correct way of following ESLint rules here? without changing the rules in .eslintrc
Probably this will solve your first problem:
const {createNewPlayer: createNewPlayerAlt } = this.props;
createNewPlayerAlt();
For the second part, you should specify what kind of object you have here.
Objects that all the properties are a string:
players: PropTypes.objectOf(PropTypes.String)
Objects that all the properties are a number:
players: PropTypes.objectOf(PropTypes.Number)
Do you have mixed properties? Then go with shape:
player: PropTypes.shape({
id: PropTypes.string,
playerNumber: PropTypes.number
}),
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments