Working from a 2017 react-router react-transition-group example where content components don't render

Question

The demo and code => https://codesandbox.io/s/73ymn2k911

Based on my observations through dev tools, it initially knows where to place components but forgets to set opacity: 1 or remove the old components

I suspect the issue lies in app.js See update below.

import React, { Component } from "react";
import { Route, matchPath } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import AnimatedSwitch from "./animated_switch";
import { firstChild } from "../utils/helpers";

import TopBar from "./top_bar";
import Home from "./home";
import Projects from "./projects";
import ProjectItem from "./project_item";
import Missed from "./missed";

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            projects: []
        };
    }
    componentDidMount() {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then(response => {
                return response.json();
            })
            .then(json => {
                this.setState({
                    projects: json.slice(0, 7)
                });
            });
    }
    render() {
        return (
            <div className="wrapper">
                <TopBar />
                <Route
                    render={({ location }) => (
                        <TransitionGroup component="main">
                            <AnimatedSwitch
                                key={location.pathname}
                                location={location}
                            >
                                <Route exact path="/" component={Home} />
                                <Route
                                    exact
                                    path="/projects"
                                    render={props => (
                                        <Projects {...props} projects={this.state.projects} />
                                    )}
                                />
                                <Route
                                    path="/projects/:id"
                                    render={props => (
                                        <ProjectItem {...props} projects={this.state.projects} />
                                    )}
                                />
                                <Route component={Missed} />
                            </AnimatedSwitch>
                        </TransitionGroup>
                    )}
                />
            </div>
        );
    }
}

But I could be wrong. Upon clicking a nav link on codesandbox.io, it prints two errors to its console that aren't reported by chrome dev tools on my live test site:

Warning: Unknown event handler property `onExited`. It will be ignored.
Warning: Received `true` for a non-boolean attribute `in`.

This is all based on an example I found for older dependencies, posted to a blog last year. I'm trying to learn from example and it's difficult to get your head around something that changes every 6 months.

If you can help, thank you!

---

Update: I've been reviewing the react-transition-group v1 to v2 migration guide and I think the problem is actually my transition components which I have no idea how to fix.

Answer 1

I just figured this problem out for myself, but TransitionGroup expects it's immediate children to be of type Transition. The component itself does not actually do any validation on this, so it will just slap in and onExit props on all of those child nodes. Because your child in this case is a styled div, those properties are not valid, so you'll get those warnings. If you wrap your components in a Transition or CSSTransition, those warnings will go away.