Redux state updates don't pass through to a method within my component's stateless function

Question

I have a stateless function that returns a component for my Redux/React Native application. In it are some defined helper functions:

export default function TasksList (props) {
  let ds = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
  });

  const _onLongPress = (rowData) => {
    props.changeCurrentlyEditedTask(rowData.index, rowData)

    props.navigator.push({
      component: EditTask,
      title: props.selectedTaskText,
      leftButtonTitle: 'Cancel',
      rightButtonTitle: 'Save',
      onLeftButtonPress: () => _cancelEditingTask(),
      onRightButtonPress: () => _saveEditedTask()
    })
  }

  const _cancelEditingTask = () => {
    props.navigator.pop();
    props.resetSelectedTask();
  }

  const _saveEditedTask = () => {
    props.saveEditedTask()
    props.navigator.pop();
  }

  const dataSource = ds.cloneWithRows(props.listOfTasks);

  return (
    <View style={ styles.tasksListContainer }>
      <TextInput
        autoCorrect={ false }
        onChangeText={ (text) => props.onChangeText(text) }
        onSubmitEditing={ () => props.addTask(props.text) }
        returnKeyType={ 'done' }
        style={ styles.tasksListTextInput }
        value={ props.text } />
      <ListView
        automaticallyAdjustContentInsets={ false }
        dataSource={ dataSource }
        enableEmptySections={ true }
        renderRow={ (rowData, secctionID, rowID) => {
          return (
            <TasksListCell
              completed={ rowData.completed }
              id={ rowID }
              onLongPress={ (rowID) => _onLongPress(rowData) }
              onPress={ (rowID) => props.changeCompletionStatus(rowData.index) }
              text={ rowData.text }
              completed={ rowData.completed }
              formattedDate={ rowData.hasOwnProperty('formattedDate') ? rowData.formattedDate : undefined } />
          )
        }
      }
      style={ styles.tasksListView } />
    </View>
  );
};

Whenever my Redux state is changed, its changes proliferate through to TasksList as intended. However, _saveEditedTask fails to receive those updates.

If I attempt to pass props as an argument to my saveEditedTask dispatch method in my container, it does not receive the updated state that the parent TasksList function does.

How can I fix this code so that _saveEditedTask receives the most up-to-date props from its parent TasksList function?

Answer 1

At the moment the _saveEditedTask function is defined and in fact does have access to the props of the TasksList component.

The issue is that you are not passing this function as a prop to any children in the render method.

You should give the below prop to one of the children in the render method of your component. If you don't do this then the function will never be invoked.

onSave={ () => _saveEditedTask() }