Kids.js

import React, {Component} from 'react';
import Header from './Header';

import '../style/Kids.css';

export default class Kids extends Component{
    //  /kids/
    //  /kids/:kid
    
    kidRoute = (ev) =>{
        let kid = ev.target.textContent.toLowerCase();
        this.props.history.push(`/kids/${kid}`);
    }
    
    render(){
        const KID = (this.props.match.params.kid)?this.props.match.params.kid:null;
        
        return (
            <div className="App">
                <Header />
                <main className="kids">
                    <h1>Welcome to South Park Kids</h1>
                    
                    {KID && KID !== 'kenny' &&
                        <button onClick={this.kidRoute}>Kenny</button>
                    }
                    {KID && KID !== 'stan' &&
                        <button onClick={this.kidRoute}>Stan</button>
                    }
                    {KID && KID !== 'kyle' &&
                        <button onClick={this.kidRoute}>Kyle</button>
                    }
                    {KID && KID !== 'eric' &&
                        <button onClick={this.kidRoute}>Eric</button>
                    }
            
            
                    { KID && 
                    <h2 className={KID}> </h2>
                    }
                </main>
            </div>
        )
    }
}