CODEWITHSUNDEEP
javascriptreactjs
jendellkenner
jendellkenner

Reputation: 25

Rendering conditional route, when mapping components

I have an application, where I map some sample user components. I add some props, and I want to make a conditional nav link, that renders just a simple "profile components that show the name.

So far I have made a conditional nav, link inside the component, and the props get send correctly, and it displays the paragraph under my User component, but I want to make it redirect, so it only shows the Profile component.

Is there a way so it only shows that component. I tried with the switch but I realized, that it only renders the first, route, so everything else, will still be shown...

 render() {
   let persons= this.state.persons.map((item, index) =>{
  return(   
    <Router>
  <User key={index} name={item.name} img={item.img} id={item.id}  />
  </Router>
)
})


//user component 

 render(){
    console.log(this.props.name)
    return(
        <Switch>
        <div >
        <img src={this.props.img} alt="profile" style={{float: 'left'}}> 
       </img>
        <p style={{textAlign: 'center'}}>{this.props.name}</p>
        <p>It's here={this.props.loggedInProp}</p>
        <Route path="/:username" exact component={ Profile} />
        <NavLink to={`/${this.props.name}`}>Click me</NavLink>
        </div>
        </Switch>


//Profile component 
const Profile= ({match}) =>{
return(
    <div>
        <p>Hello {match.params.username}</p>
    </div>
)
}

Upvotes: 0

Views: 60

Answers (1)

Dadsquatch
Dadsquatch

Reputation: 566

<Route
    exact
        path="/profile/view/:username"
        render={props => <ProfileView {...props} />}
/>

inside of ProfileView component you could then use this.props.match.params.username to filter your collection of data and display only it's details.

ProfileView component

import React, { Component } from 'react';

export class ProfileView extends Component {
  constructor(){
    super()
    this.state = { 
      allUsers[{ user1 ... }, {user2 ...}, ...],
      selectedUser: {}
     }
  }

   componentDidMount(){
    //  fetch('/get/users/from/somewhere').then(users => {
    //    this.setState({allUsers: users}) // Usually you would just pull your one user from the route and then fetch it's single details from a database
    //  })
    this.setState({selectedUser: allUsers.filter(user => user.username === this.props.match.params.username)})
   }

  render() { 
    return ( 
      <div>
        <em>Do stuff with your this.state.selectedUser... things here</em>
      </div>
     );
  }
}

Upvotes: 1

Related Questions