How to make a single React component then fill it with information based on URL?

Question

I am building a list of people my company is working with. Since it is constantly updating with new people I decided to make a single page web app purely in React as a way to learn it since I am new to it and I wanted to learn it for sometime now.

I have index.js and people.js. In people.js I made an object for every person and they each have own atributes (age, location etc.).

Since I don't know how to do it properly I made for each person Home and Single component of it.

Home component is something like:

    export class AnnHome extends Component{
  render(){
    return(
    <div>
      <Link to={{pathname: 'influencer/Ann',
                  component: 'AnnSingle'
      }}>
      <img
        src={require('./img/ann.png')}
        alt="{Kofs.name}"
        className="Avatar rounded-circle"
      /></Link>
    <p>{Ann.name}</p>
    </div>
    )
  }
}

Before that component I have defined object 'Ann' with it's info.

My question is:

How to make a one Home component and one Single Component like a template so when I go to /ann to fill SingleComponent with Ann info.

Home Component would be like a list of all clients (people): https://www.w3schools.com/howto/howto_css_team.asp something like this.

I currently have a lot of Home components that I've put manually.

Hopefully I described my problem, my english is rusty :D

Welcome to StackOverflow! This is a large question, too large for StackOverflow I'm afraid. Try reading a book on React or going through more tutorials, then implement, then come back to raise a question. You'll need to study the React Router. If you know another web framework well, build this in that first, then port it to React. It will make it more clear where you are stuck. Once you have a specific question, just post it here with all relevant information (such as your data) and you'll get help. — duhaime, Sep 11 '18 at 12:35
Have you looked into props https://reactjs.org/docs/components-and-props.html? You typically pass values into a component using props, which can then be used in the rendering of the component. — OliverRadini, Sep 11 '18 at 12:36
@duhaime I'm sorry. The question itself is short, I just described the situation. — Chempo, Sep 11 '18 at 13:25
@OliverRadini yes I have, but I can't think of a way to pass props based on a URL — Chempo, Sep 11 '18 at 13:26
https://stackoverflow.com/questions/35352638/how-to-get-parameter-value-from-query-string gives some information on getting data from a url in react router. — OliverRadini, Sep 11 '18 at 13:31
Chempo - instead of passing props based on a url, you can also just pass props to a component and render the new data there. You can update the url hash to keep things stateful if you like. That feels a little more natural in React. But the best way to solve this IMHO is to use a state management library like Redux, which can pass data from one route to another easily (Redux creates a global data store to which all components have read/write access). — duhaime, Sep 11 '18 at 14:20

duhaime · Answer 1 · 2018-09-11T21:22:56.523

Hopefully this can help get you started.

As I mentioned above, you want to use the React Router to listen to route changes. Then one specifies which component should be mounted for each route. Here I use the route to match on the individual's name (e.g. so /stace matches the element in people where the person's name attribute is Stace.

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

const people = [
  {name: 'Stace', img: 'https://placeimg.com/200/200/people'},
  {name: 'Marlo', img: 'https://placeimg.com/201/200/people'},
]

const App = props => (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path='/stace' component={Person} />
        <Route path='/marlo' component={Person} />
      </Switch>
      {people.map((p, idx) => <Link to={'/' + p.name}>{p.name}</Link>)}
    </div>
  </BrowserRouter>
)

const Person = props => {
  const name = props['match']['path'].toLowerCase().substring(1);
  const person = people.filter(p => p.name.toLowerCase() == name)[0]
  return (
    <div className='person'>
      <img src={person.img || ''}></img>
      <h2>{person.name || ''}</h2>
    </div>
  )
}

export default App;

This is of course only meant to demonstrate the router-related concepts. If you use create-react-app, run yarn add react-router@4.3.0 && yarn add react-router-dom@4.3.1, and replace App.js with the content above, you'll be able to preview the app and explore the ideas expressed above. Clicking on a name will change the route to that name and display the data for that name. Below I've clicked on Stace:

How to make a single React component then fill it with information based on URL?

1 Answers1