Tukukkk

I have some snippets of code that I'm happy with but am hoping for some advice for future reference. Basically what I have is a Main.js containing all of my Routes, a Class Component Friends.js which holds the array of data, and a ViewFriend.js Stateless Component that currently just displays the id of the specific component clicked on. So right now I'm not able to display the data for that current component. I have tried passing props into the Route using 'render' instead of 'component', but wasn't able to get it to work. I think what was happening was I was overwriting the current props, because when I tried that, I was no longer able to access the match prop. What are your guys' suggestions? I want to avoid having to create a component for each friend, and render the specific one with all of its data pulled from its parent component.

Main.js

import React, { Component } from 'react';

import { Switch, Route } from 'react-router-dom';

import Home from './Home';

import About from './About';

import Contact from './Contact';

import Friends from './Friends';

import ViewFriend from './ViewFriend';





const Main = () => {

    return (

        <div>

            <Switch> 

                <Route exact path="/" component={ Home } />

                <Route exact path="/about" component={ About } />

                <Route exact path="/contact" component={ Contact } />

                <Route exact path="/friends" component={ Friends } />

                <Route path ="/friends/:id" component={ ViewFriend } />

            </Switch>

        </div>

    )

}



export default Main;

Friends.js

import React, { Component } from 'react';

import { NavLink } from 'react-router-dom';



class Friends extends Component {

    state = {

        friends: [

            {

                name: 'Andrew',

                age: 22,

                id: 1

            },

            {

                name: 'Bubba',

                age: 30,

                id: 2

            },

            {

                name: 'Courtney',

                age: 45,

                id: 3

            }

        ]

    }



    render() {

        return (

            <div className="container">

                <div className="header">

                    Friends Page

                </div>



                { this.state.friends.map(friend => 

                    <div key={ friend.id } className="friendBox">

                        <div className="friendName">

                            Name: { friend.name }

                        </div>

                        <div className="friendAge">

                            Age: { friend.age }

                        </div>

                        <div className="friendId">

                            ID: { friend.id }

                        </div>

                        <div className="viewButton">

                            <NavLink className="friendLink" to={ "/friends/" + friend.name} >View Friend</NavLink>

                        </div>

                    </div>

                ) }

            </div>

        )

    }

}



export default Friends;

ViewFriend.js

import React from 'react';



const ViewFriend = (props) => {

    return (

        <div className="container">

            <div className="friendBox">

                { props.match.params.id }

            </div>

        </div>

    )

}



export default ViewFriend;

Also, here is the snippet of code I tried to use as mentioned above...

<Route path="/friends/:id" render={ <ViewFriend name={friend.name} /> } />

Any additional thoughts on the layout of the components would be greatly appreciated as well :)

Thanks!