Updating Parent Component via Child Component in React Native

Question

I have a parent component and two child components. One of the child components is a form with an add button. I am able to capture the text when add button is pressed, but stuck when trying to pass that value to the parent component, update the array in parent component and re-render the view.

Parent Component:

var Tasks = ['Competitor Study','Content Plan','Write','Promote','Consumer Research']

//Build React Component
class MyTaskList extends Component {

render() {
    return (
      <View style={styles.container}>
         <Text style={styles.titleStyle}>
          My Tasks  
          {"\n"} 
            ({Moment().format("MMM Do YY")})
          {"\n"}
        </Text>
        <AddTask />
        {this.workitems()}
      </View>
    );
  }

  workitems() {  
   return (Tasks.map(function(workitem,i) {
    return <ListItem key={i} workitem={workitem} />
        }
      )
    );  
  }

}

Child component with the form

class AddTask extends Component {

    constructor(props) {
      super(props);
      this.state = {
        enterTask: 'Enter task'
      };
    }

    onTaskTextChanged(event) {
      this.setState({ enterTask: event.nativeEvent.text });
    }

    onAddPress() {
     var newtask = this.state.enterTask;
     console.log('new task - '+newtask);
    }

    render() {
        return (
            <View style={styles.addTask}>
                   <TextInput
                    style={styles.taskInput}
                    value={this.state.enterTask}
                    onChange={this.onTaskTextChanged.bind(this)}
                    placeholder='Enter task'/>
                 <TouchableHighlight style={styles.button}
                    onPress={this.onAddPress.bind(this)}
                    underlayColor='#99d9f4'>
                    <Text style={styles.buttonText}>Add</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

I would instead use state for this as using forceUpdate() is not recommended

From React docs:

Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child. React will still only update the DOM if the markup changes.

Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render(). This makes your component "pure" and your application much simpler and more efficient.

(Based off of @1ven answer)

Parent Component:

//Build React Component
class MyTaskList extends Component {

    constructor(props) {
        super(props);

        this.state = {
            tasks: [
                'Competitor Study',
                'Content Plan',
                'Write','Promote',
                'Consumer Research'
            ]
        } 
    }

    handleAddTask(task) {
        var newTasks = Object.assign([], this.state.tasks);
        newTasks.push(task);
        this.setState({tasks: newTasks});
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.titleStyle}>
                    My Tasks  
                    {"\n"} 
                    ({Moment().format("MMM Do YY")})
                    {"\n"}
                </Text>
                <AddTask onAddTask={this.handleAddTask.bind(this)} />
                {this.workitems()}
            </View>
        );
    }

    workitems() {  
        return this.state.tasks.map(function(workitem,i) {
            return <ListItem key={i} workitem={workitem} />
        });
  
    }
}

Child component with the form

class AddTask extends Component {
    constructor(props) {
        super(props);
        this.state = {
            enterTask: 'Enter task'
        };
    }

    onTaskTextChanged(event) {
        this.setState({ enterTask: event.nativeEvent.text });
    }

    onAddPress() {
        var newtask = this.state.enterTask;
        console.log('new task - '+newtask);
        // Providing `newtask` variable to callback.
        this.props.onAddTask(newtask);
    }

    render() {
        return (
            <View style={styles.addTask}>
                <TextInput
                    style={styles.taskInput}
                    value={this.state.enterTask}
                    onChange={this.onTaskTextChanged.bind(this)}
                    placeholder='Enter task'/>
                <TouchableHighlight style={styles.button}
                    onPress={this.onAddPress.bind(this)}
                    underlayColor='#99d9f4'>
                   <Text style={styles.buttonText}>Add</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 7, 2016 at 9:07

David

7,5256 gold badges32 silver badges45 bronze badges

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

7 Comments

user709413 Over a year ago

Getting following error when I press "Add" button - Unhandled JS Exception: undefined is not an object (evaluating 'this.state.Tasks')

David Over a year ago

try lowercase "Tasks": this.state.tasks :)

user709413 Over a year ago

:( Got following error - this.props.onAddTask is not a function. (In 'this.props.onAddTask(newtask)', 'this.props.onAddTask' is undefined)

David Over a year ago

My bad! I must have copied the wrong piece of code - I have updated the example in my answer - forgot to add the onAddTask props to the AddTask component in MyTaskList

user709413 Over a year ago

Thanks for the help. Used the exact code given by you, but getting Unhandled JS Exception: undefined is not an object (evaluating 'this.state.tasks').

|

1ven · Accepted Answer · 2016-08-06 21:22:10Z

0

You should provide handleAddTask callback from parent to child component:

var Tasks = ['Competitor Study','Content Plan','Write','Promote','Consumer Research']

//Build React Component
class MyTaskList extends Component {

  handleAddTask(task) {
    // When task will be added, push it to array
    Tasks.push(task);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.titleStyle}>
          My Tasks  
          {"\n"} 
          ({Moment().format("MMM Do YY")})
          {"\n"}
        </Text>
        <AddTask onAddTask={this.handleAddTask} />
        {this.workitems()}
      </View>
    );
  }

  workitems() {  
    return (
      Tasks.map(function(workitem,i) {
        return <ListItem key={i} workitem={workitem} />
      })
    );  
  }
}

Next, you should pass task from child component to this callback:

class AddTask extends Component {
  constructor(props) {
    super(props);
    this.state = {
      enterTask: 'Enter task'
    };
  }

  onTaskTextChanged(event) {
    this.setState({ enterTask: event.nativeEvent.text });
  }

  onAddPress() {
    var newtask = this.state.enterTask;
    console.log('new task - '+newtask);
    // Providing `newtask` variable to callback.
    this.props.onAddTask(newtask);
  }

  render() {
    return (
      <View style={styles.addTask}>
        <TextInput
          style={styles.taskInput}
          value={this.state.enterTask}
          onChange={this.onTaskTextChanged.bind(this)}
          placeholder='Enter task'/>
        <TouchableHighlight style={styles.button}
          onPress={this.onAddPress.bind(this)}
          underlayColor='#99d9f4'>
          <Text style={styles.buttonText}>Add</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

That's it. Hope, it helps!

edited Aug 6, 2016 at 21:22

answered Aug 6, 2016 at 21:16

1ven

7,0361 gold badge29 silver badges39 bronze badges

2 Comments

user709413 Over a year ago

Great! It is adding the new entry to the array. Any idea how do I re-render the view to show the updated Array?

1ven Over a year ago

@user709413, sure, run this.forceUpdate() after pushing in array.

Collectives™ on Stack Overflow

Updating Parent Component via Child Component in React Native

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related