Overview:

I am trying to subscribe to changes in state once I have rendered a particular component (AddFoodForm), if I navigate away, there should be no state available when I come back, however, when I am on the page and I change state then I want those state changes to be available to my other component (AddedList). Is this possible?

Or another approach. When I render my AddedList component, I don't want any initial state to show up, but if anything changes while this component is viewable then the new state change should show up. Again, not sure if this is possible.

The components AddFoodForm and AddedList are below:

AddFoodForm

```
class AddFoodForm extends Component {
    state = {
        date: moment(),
        mealCategory: 'breakfast',
        calendarFocused: false,
    }

    onDateChange = date => {
        if (date) this.setState({ date })
    }

    onSubmit = e => {
        e.preventDefault()
        const food = {
            date: this.state.date,
            mealCategory: this.state.mealCategory
        }
        this.props.addFoodToMeal(food)
    }

    onFocusChange = ({ focused }) => this.setState({ calendarFocused: focused })
    onMealChange = e => this.setState({ mealCategory: e.target.value })

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <select value={this.state.mealCategory}
                        onChange={this.onMealChange}>
                        <option value='breakfast'>Breakfast</option>
                        <option value='lunch'>Lunch</option>
                        <option value='dinner'>Dinner</option>
                        <option value='snack'>Snack</option>
                    </select>
                    <SingleDatePicker
                        date={this.state.date}
                        onDateChange={this.onDateChange}
                        focused={this.state.calendarFocused}
                        onFocusChange={this.onFocusChange}
                        numberOfMonths={1}
                        isOutsideRange={() => false}
                        id="caloriEat-addFood-form" />
                    <button type="submit">Add Food</button>
                </form>
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch) => ({
    addFoodToMeal: food => dispatch(addFoodToMeal(food))
})

const mapStateToProps = state => ({
    food: state.food
})

export default connect(mapStateToProps, mapDispatchToProps)(AddFoodForm)

```

AddedList

```
const AddedList = (props) => {
    console.log(props);
    return (
        <div>
            {props.meals.map(meal => (
                <li key={meal.uuid}>{`${meal.foodItem} added, calories:${meal.calories}`}</li>
            ))}
        </div>
    );
}

const mapStateToProps = (state) => ({
    meals: state.meals
})

export default connect(mapStateToProps)(AddedList)

```

The components hierarchy I have is:

SearchFood renders InputForm, DisplayFood, and AddedList

DisplayFood renders two form components ServingForm and AddFoodForm

AddFoodForm will update state via redux

AddedList should be based on the changes made by AddFoodForm.

The GitHub repo if needed is <https://github.com/altafmquadri/caloriEat>

**Update to clarify question**

All my states update correctly. When someone is on the search page. I want them to search for a food item, if they decide to add that item then the form clears and there is no redirect since I want the functionality to be that someone can add more food items.

At the same time, if an item is added, I want the user to know that they added something. Hence, the creation of the AddedList component. It simply renders a list of what is added. I want that list to be just the items added when a user adds new items per visit to the page.

Since I am grabbing the Meal state, I am getting all the meals that is not what I want. So let's say on the search a user adds an apple and an orange, a list showing apple and orange should be rendered by the AddedList component. If the user navigates away from the page and Later returns, the list should be empty. Now the user adds a banana. Only the banana should be rendered by the AddedList component, apple and orange should not show up since they are meals that were searched for separately in a different page visit. Hope that makes sense.