Eslint throwing eslint(react/prop-types) error despite already declared propTypes. I'm using eslint-plugin-react

I've looked at a couple of other similar problems and as well as the lint rule for the proptype but they don't address my issue.

import React from 'react';
import { View, Text, TouchableHighlight, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';

const PASTEL_PINK = '#dea5a4';
const PASTEL_BLUE = '#779ecb';

const Buttons = ({ onPressStart, onPressPause, onPressReset, onGoing }) => (
  <View >
    <TouchableHighlight
      onPress={onPressStart}
      disabled={onGoing}
    >
      <Text >{START_TIMER}</Text>
    </TouchableHighlight>
    <TouchableHighlight
      onPress={onPressPause}
      disabled={!onGoing}
    >
      <Text >{PAUSE_TIMER}</Text>
    </TouchableHighlight>
    <TouchableHighlight onPress={onPressReset}>
      <Text >{RESET_TIMER}</Text>
    </TouchableHighlight>
  </View>
);

Buttons.protoTypes = {
  onPressStart: PropTypes.func.isRequired,
  onPressPause: PropTypes.func.isRequired,
  onPressReset: PropTypes.func.isRequired,
  onGoing: PropTypes.bool.isRequired,
};

export default Buttons;

Parent component supplying the props

import React from 'react';
import Buttons from './components/Buttons'
import Container from './components/Container';
import Timer from './components/Timer';
import Inputs from './components/Inputs';
import Logo from './components/Logo';
import Buttons from './components/Buttons'
import Header from './components/Header'

export default class Home extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      initialMinute: '00',
      initialSecond: '00',
      minute: '00',
      second: '00',
      completed: false,
      onGoing: false,
    }

  componentWillMount() {
    this.setState({
        minute: this.state.initialMinute,
        second: this.state.initialSecond,
      }
    );
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  startTimer = () => {
    console.log("Timer Started")
    this.setState(
      (prevState) => (
        {
          completed: false,
          onGoing: true,
        }
      )
    )
    // start the timer
    this.interval = setInterval(
      this.decrementTime,
      1000
    )
  }

  decrementTime = () => {
    if (this.state.second > 0) {
      console.log(`second: ${this.state.second}`)
      this.setState(
        (prevState) => (
          {second: prevState.second - 1}
        )
      )
      if (this.props.second < 10) {
        this.setState({
            second: '0'+this.state.second
        });
      }
    }
    else {
      if (this.state.minute > 0) {
        this.setState(
          (prevState) => (
            {
              minute: prevState.minute - 1,
              second: prevState.second + 59,
            }
          )
        )
        if (this.props.minute < 10) {
          this.setState({
              state: '0'+this.state.minute
          });
        }
      }
      else {
        this.resetTimer();
        this.timesUp(true);
      }
    }
  }

  pauseTimer = () => {
    console.log("Timer stopped")
    clearInterval(this.interval);
    this.setState({
        onGoing: false,
      }
    )
  }

  resetTimer = () => {
    console.log("Timer is reset")
    this.pauseTimer();
    this.setState({
        minute: this.state.initialMinute,
        second: this.state.initialSecond,
      }
    );
  }

  timesUp = (bool) => {
    this.setState(
      (prevState) => (
        {
          completed: bool,
        }
      )
    )
  }


  optionPressed = () => {
    console.log("Header is pressed")
  }

  handleMinuteInput = (text) => {
    // clamp minute between 0 and 60
    // const number = helper.clamp(parseInt(text), 0, 60)
    this.setState(
      {
        initialMinute: text,
      }
    )
  }

  handleSecondInput = (text) => {
    // const number = helper.clamp(parseInt(text+''), 0, 60)
    this.setState(
      {
        initialSecond: text,
      }
    )
  } 

  render() {
    return (
      <Container>
        <Header onPress={this.optionPressed}/>
          <Logo 
            slogan={'Get studying, the Pomodoro way!'}
            imageSource={'../../assets/pomo-timer-logo-small.png'}
          />
          <Timer 
            minute={this.state.minute}
            second={this.state.second}
            completed={this.statepleted}
            onGoing={this.state.onGoing}
          />
          <Buttons 
            onPressStart={this.startTimer}
            onPressPause={this.pauseTimer}
            onPressReset={this.resetTimer}
            onGoing={this.state.onGoing} // true when not onGoing
          />
          <Inputs 
            inputType={'Work'}
            labelColor={PASTEL_BLUE}
            handleMinuteInput={this.handleMinuteInput}
            handleSecondInput={this.handleSecondInput}
            onGoing={this.state.onGoing}
          />
          <Inputs
            inputType={'Rest'}
            labelColor={PASTEL_PINK}
            // setTimer={this.setTimer}
            handleMinuteInput={this.handleMinuteInput}
            handleSecondInput={this.handleSecondInput}
            onGoing={this.state.onGoing}
          />
      </Container>
    )
  }
}

I don't expect these error to show up but it does.

'onPressStart' is missing in props validation 'onPressPause' is missing in props validation 'onPressReset' is missing in props validation 'onGoing' is missing in props validation

Eslint throwing eslint(react/prop-types) error despite already declared propTypes. I'm using eslint-plugin-react

I've looked at a couple of other similar problems and as well as the lint rule for the proptype but they don't address my issue.

import React from 'react';
import { View, Text, TouchableHighlight, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';

const PASTEL_PINK = '#dea5a4';
const PASTEL_BLUE = '#779ecb';

const Buttons = ({ onPressStart, onPressPause, onPressReset, onGoing }) => (
  <View >
    <TouchableHighlight
      onPress={onPressStart}
      disabled={onGoing}
    >
      <Text >{START_TIMER}</Text>
    </TouchableHighlight>
    <TouchableHighlight
      onPress={onPressPause}
      disabled={!onGoing}
    >
      <Text >{PAUSE_TIMER}</Text>
    </TouchableHighlight>
    <TouchableHighlight onPress={onPressReset}>
      <Text >{RESET_TIMER}</Text>
    </TouchableHighlight>
  </View>
);

Buttons.protoTypes = {
  onPressStart: PropTypes.func.isRequired,
  onPressPause: PropTypes.func.isRequired,
  onPressReset: PropTypes.func.isRequired,
  onGoing: PropTypes.bool.isRequired,
};

export default Buttons;

Parent component supplying the props

import React from 'react';
import Buttons from './components/Buttons'
import Container from './components/Container';
import Timer from './components/Timer';
import Inputs from './components/Inputs';
import Logo from './components/Logo';
import Buttons from './components/Buttons'
import Header from './components/Header'

export default class Home extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      initialMinute: '00',
      initialSecond: '00',
      minute: '00',
      second: '00',
      completed: false,
      onGoing: false,
    }

  componentWillMount() {
    this.setState({
        minute: this.state.initialMinute,
        second: this.state.initialSecond,
      }
    );
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  startTimer = () => {
    console.log("Timer Started")
    this.setState(
      (prevState) => (
        {
          completed: false,
          onGoing: true,
        }
      )
    )
    // start the timer
    this.interval = setInterval(
      this.decrementTime,
      1000
    )
  }

  decrementTime = () => {
    if (this.state.second > 0) {
      console.log(`second: ${this.state.second}`)
      this.setState(
        (prevState) => (
          {second: prevState.second - 1}
        )
      )
      if (this.props.second < 10) {
        this.setState({
            second: '0'+this.state.second
        });
      }
    }
    else {
      if (this.state.minute > 0) {
        this.setState(
          (prevState) => (
            {
              minute: prevState.minute - 1,
              second: prevState.second + 59,
            }
          )
        )
        if (this.props.minute < 10) {
          this.setState({
              state: '0'+this.state.minute
          });
        }
      }
      else {
        this.resetTimer();
        this.timesUp(true);
      }
    }
  }

  pauseTimer = () => {
    console.log("Timer stopped")
    clearInterval(this.interval);
    this.setState({
        onGoing: false,
      }
    )
  }

  resetTimer = () => {
    console.log("Timer is reset")
    this.pauseTimer();
    this.setState({
        minute: this.state.initialMinute,
        second: this.state.initialSecond,
      }
    );
  }

  timesUp = (bool) => {
    this.setState(
      (prevState) => (
        {
          completed: bool,
        }
      )
    )
  }


  optionPressed = () => {
    console.log("Header is pressed")
  }

  handleMinuteInput = (text) => {
    // clamp minute between 0 and 60
    // const number = helper.clamp(parseInt(text), 0, 60)
    this.setState(
      {
        initialMinute: text,
      }
    )
  }

  handleSecondInput = (text) => {
    // const number = helper.clamp(parseInt(text+''), 0, 60)
    this.setState(
      {
        initialSecond: text,
      }
    )
  } 

  render() {
    return (
      <Container>
        <Header onPress={this.optionPressed}/>
          <Logo 
            slogan={'Get studying, the Pomodoro way!'}
            imageSource={'../../assets/pomo-timer-logo-small.png'}
          />
          <Timer 
            minute={this.state.minute}
            second={this.state.second}
            completed={this.state.completed}
            onGoing={this.state.onGoing}
          />
          <Buttons 
            onPressStart={this.startTimer}
            onPressPause={this.pauseTimer}
            onPressReset={this.resetTimer}
            onGoing={this.state.onGoing} // true when not onGoing
          />
          <Inputs 
            inputType={'Work'}
            labelColor={PASTEL_BLUE}
            handleMinuteInput={this.handleMinuteInput}
            handleSecondInput={this.handleSecondInput}
            onGoing={this.state.onGoing}
          />
          <Inputs
            inputType={'Rest'}
            labelColor={PASTEL_PINK}
            // setTimer={this.setTimer}
            handleMinuteInput={this.handleMinuteInput}
            handleSecondInput={this.handleSecondInput}
            onGoing={this.state.onGoing}
          />
      </Container>
    )
  }
}

I don't expect these error to show up but it does.

'onPressStart' is missing in props validation 'onPressPause' is missing in props validation 'onPressReset' is missing in props validation 'onGoing' is missing in props validation

• javascript
• reactjs
• react-native
• eslint
• react-proptypes

• Can you post the code of whatever is giving this component it's props? – Revircs Commented Jul 9, 2019 at 0:33

2 Answers 2

Replace

Buttons.protoTypes 

with

Buttons.propTypes

I have done this mistake too many times

It's propTypes, not protoTypes :)