[React] Solution for ‘children’ is missing in props validation eslint(react/prop-types)

ESLint — Airbnb style

If you came up with this error message “ ‘children’ is missing in props validation eslint(react/prop-types)” , this article might help.

My code was like below and I found the error message.

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
color: red;
border: none;
background-color: gray;
`;

const Button = ({ children }) => <StyledButton>{children}</StyledButton>;

And there are two ways to solve this error.

1. Specify prop types

[1] Install prop-types package with npm i prop-types --save

[2] Import prop-types module to your js file.

[3] Specify prop types.

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const StyledButton = styled.button`
color: red;
border: none;
background-color: gray;
`;

const Button = ({ children }) => <StyledButton>{children}</StyledButton>;

Button.propTypes = {
children: PropTypes.node.isRequired,
};

2. Ignore the error

Add below to your .eslintrc.js file, so the error message can be ignored.

...
rules: { ... 'react/prop-types': ['off'], 
},

Normally specifying prop type is recommended, but if it is small project, simply ignoring the error will be also a good option!