CODEWITHSUNDEEP
javascriptfunctionreactjsredux
user3802348
user3802348

Reputation: 2592

this.props.function() is undefined in React app?

I am currently building a react-redux app and when I click the "save" button, the app should call the function addToSaved in actions/index.js. However, I am getting the error that 'this.props.addToSaved is undefined' and not a function. I define the function in actions/index.js but am wondering if I'm missing something else. Here's what I currently am doing:

in components/MainView.js:

'use strict';
import { addToSaved } from "../actions"

var React = require('react-native');
var {
    StyleSheet,
    Image,
    View,
    Text,
    Component,
    TouchableHighlight
} = React;


class MainView extends Component {
    onSearchPressed() {
        console.log('search pressed');
        this.props.addToSaved();
    }
    render() {
        return (
            <View style={styles.container}>
                <Image style={styles.image}
                    source={{uri: pic.img_url}} />
                <TouchableHighlight style = {styles.button}
                        onPress={this.onSearchPressed.bind(this)}
                        underlayColor='#99d9f4'>
                        <Text style = {styles.buttonText}>Save</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

module.exports = MainView;

in actions/index.js:

var actions = exports = module.exports
exports.ADD_SAVED = 'ADD_SAVED'
exports.addToSaved = function addToSaved() {
    console.log('got to ADD_SAVED');

}

Upvotes: 0

Views: 3342

Answers (1)

bcherny
bcherny

Reputation: 3172

You're importing addToSaved, and expecting it to appear on this.props?

If you want it to be accessible on this.props, you need to pass it into the component instance:

<MainView addToSaved={addToSaved} />

Upvotes: 3

Related Questions