Failed prop type: The prop `number` is marked as required in `Component명`, but its value is `undefined`. 해결 방법

이번 글에서는 Failed prop type: The prop `number` is marked as required in `Component명`, but its value is `undefined`. 에러 해결 방법에 대하여 알아보겠습니다.

 

Failed prop type: The prop `number` is marked as required in `Component명`, but its value is `undefined`.

 

 

[에러가 발생한 코드]

App.js

import React from 'react'; import TestComponent from './TestComponent'; const App = () => { return <TestComponent name={'119'}>리액트</TestComponent> } export default App;

 

TestComponent.js

import React from 'react'; import PropTypes from 'prop-types'; const TestComponent = props => { const { name, children } = props; return ( <div> 안녕하세요. 제 이름은 {name} 입니다. <br/> children 값은 {children} 입니다. </div> ) } TestComponent.propTypes = { name: PropTypes.string, number: PropTypes.number.isRequired } export default TestComponent;

 

 

[에러 원인]

isRequired를 사용하여 필수 number를 필수 propTypes로 설정하였는데, number의 값이 설정되지 않아서 발생한 에러입니다.

 

[해결 방법]

props에 number값을 TestComponent에 전달해 주시면 됩니다.

import React from 'react'; import TestComponent from './TestComponent'; const App = () => { return <TestComponent name={'119'} number={119}>리액트</TestComponent> } export default App;