Failed prop type: Invalid prop `name` of type `number` supplied to `Component명`, expected `string`. 해결 방법

 

 

이번 글에서는 Failed prop type: Invalid prop `name` of type `number` supplied to `Component명`, expected `string`. 에러 해결 방법에 대하여 알아보겠습니다.

 

Failed prop type: Invalid prop `name` of type `number` supplied to `Component명`, expected `string`.

 

 

[에러가 발생한 코드]

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
}

export default TestComponent;

 

 

[에러 원인]

값이 나타나기는 했지만 콘솔에 경고 메시지를 출력하여 propTypes가 잘못되었다는 것을 알려주고 있습니다. 에러가 발생한 이유는 컴포넌트에 설정한 props가 propTypes에서 지정한 형태와 일치하지 않아서 입니다.

 

 

[해결 방법]

1. props를 propTypes에서 지정한 타입과 일치시켜 줍니다.

App.js

import React from 'react';
import TestComponent from './TestComponent';

const App = () => {
  return <TestComponent name={"119"}>리액트</TestComponent>
}

export default App;

 

2. propTypes를 props에 지정한 타입과 일치시켜 줍니다.

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.number
}

export default TestComponent;