undefined is not an object (evaluating _react.default.PropTypes.func)

Question

I have been referring a tutorial having 8 sections since a week, on which the code base depends from section 1. On the later section, I had created a ColorForm.js file as per the tutorial which includes the below code. When I have defined the ColorForm.PropTypes such as

ColorForm.propTypes = {
    onNewColor: React.PropTypes.func.isRequired
}

the app thrown an error, undefined is not an object (evaluating _react.default.PropTypes.func)

On referring various post I came to know that I had to install 'prop-types', even though I am getting the above error. Can anyone help me to sort out this issue. Thanks in advance.

ColorForm.js

import React, {Component} from 'react'
import {
    View,
    Text,
    StyleSheet,
    TextInput
} from 'react-native'

export default class ColorForm extends Component {
    constructor() {
        super()
        this.state = {
            txtColor: ''
        }

        this.props.onNewColor(this.state.txtColor.toLowerCase())
        this.submit = this.submit.bind(this)
    }

    submit() {
        this.setState({txtColor: ''})
    }

    render() {
        return(
            <View style = {styles.container}>
                <TextInput 
                    style = {styles.txtInput}
                    placeholder = "Enter a color..."
                    onChangeText={(txtColor) => this.setState({txtColor})}
                    value  = {this.state.txtColor}
                />
                <Text style = {styles.button} onPress={this.submit}>Add</Text>
            </View>
        )
    }
}

ColorForm.propTypes = {
    onNewColor: React.PropTypes.func.isRequired
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: 'lightgrey',
        height: 70
    },
    txtInput: {
        flex: 1,
        margin: 5,
        padding: 5,
        borderWidth: 2,
        fontSize: 20,
        borderRadius: 5,
        backgroundColor: 'snow'
    },
    button: {
        backgroundColor: 'darkblue',
        margin: 5,
        padding: 5,
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
        fontSize: 20
    }
})

Does this answer your question? Issue with React.PropTypes.func.isRequired — Prakash Karena
– Prakash Karena, Commented Jan 15, 2020 at 12:27

Prakash Karena · Accepted Answer · 2020-01-15 13:59:00Z

2

insted of React.PropTypes use PropTypes directly.

step 1 : import PropTypes from 'prop-types';

 onNewColor: PropTypes.func.isRequired

step 2.

 constructor() {
        super()
        this.state = {
            txtColor: ''
        }

        this.props.onNewColor = this.onNewColor.bind(this)
        this.submit = this.submit.bind(this)
    }

    onNewColor(textColor) => {
      return textColor.toLowerCase()
    }

step 3 :

  <TextInput 
      style = {styles.txtInput}
      placeholder = "Enter a color..."
      onChangeText={(txtColor) => this.setState({txtColor})}
      value  = {this.props.onNewColor(this.state.txtColor)}
  />

edited Jan 15, 2020 at 13:59

answered Jan 15, 2020 at 12:28

Prakash Karena

2,6031 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sree_iphonedev Over a year ago

Thanks for posting the code. I modified it as you suggested, but now I am getting different error such as "undefined is not an object (evaluating _this.props.onNewColor)". Can you let me know what I am doing wrong?

Konstantin Over a year ago

@sree_iphonedev is this.props.onNewColor defined? Can you please check if it's passed correctly?

Collectives™ on Stack Overflow

undefined is not an object (evaluating _react.default.PropTypes.func)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related