After form submission, browser is not updating the empty state

Question

1. Here I am getting new todo from the user using AddTodo component:

import React from 'react'

const AddTodo = ({ onChange, onSubmit, newTodo }) => {
  return (
    <form>
      <textarea
        onChange={onChange}
        value={newTodo}
      />
      <button onClick={onSubmit}>
        Save
      </button>
    </form>
  )
}

export default AddTodo

2. Here in Home (Parent component of AddTodo) component, the textarea is not updating in the browser after I am setting it to empty string.

import React, { Component } from 'react'
import AddTodo from './AddTodo'

class Home extends Component {
  state = {
    todos: [
      {
        id: '1',
        content: 'Lorem ipsum dolor sit amet consectetur.'
      }
    ],
    newTodo: ''
  }

  handleChange = e => {
    this.setState({ newTodo: e.target.value })
  }

  handleSubmit = e => {
    e.preventDefault()

    let todosArr = [...this.state.todos]
    const newIndex = todosArr.length + 1

    todosArr.push({ id: newIndex, content: this.state.newTodo })
    this.setState({ todos: todosArr, newTodo: '' })
  }

  render() {
    return (
      <AddTodo onChange={this.handleChange} onSubmit={this.handleSubmit} />
    )
  }
}

export default Home

The state is updating fine. But it is not updating in the browser only.

Answer 1

Home isn't passing the newTodo state to the AddTodo component.

Edit: You aren't doing anything with that state, so when it updates there isn't anything for React to do as far as the UI is concerned.

Edit: That line needs to be

<AddTodo 
  newTodo={this.state.newTodo} 
  onChange={this.handleChange} 
  onSubmit={this.handleSubmit} 
/>