React component displaying dynamic data based on URL

Question

I want to create a single dynamic component that displays data from a json file dependant on the url. Instead of manually creating and storing each page.

For example: https://jsonplaceholder.typicode.com/posts

on page route: /1 the page would display:

Title = unt aut facere repellat provident occaecati excepturi optio reprehenderit

Body = quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto.

How would I return specific data from the json? Here's a quick fiddle: https://jsfiddle.net/pb2tL7ma/

Any suggestions would be appreciated!

Is the question how to extract parameters from the URL? You should look into adding a router like react-router to your app, then you can access those parameters based on the Route — ZekeDroid
– ZekeDroid, Commented Apr 16, 2019 at 14:56
@ZekeDroid I know how to extract the url parameter, how would I use the parameter to display one singular piece of data and map it to the component? — John107
– John107, Commented Apr 16, 2019 at 15:02
Did any of the answers work for you? Consider accepting one of them if that's the case. — Tholle
– Tholle, Commented Apr 16, 2019 at 20:59

Tholle · Accepted Answer · 2019-04-16 15:14:01Z

One way of going about it is to use React Router with URL parameters and create a Link for every page in your pages array, and use this URL parameter to extract the page you want to view.

Example (CodeSandbox)

class App extends React.Component {
  state = {
    pages: []
  };

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/posts`).then(res => {
      this.setState({ pages: res.data });
    });
  }

  render() {
    const { pages } = this.state;

    if (pages.length === 0) {
      return null;
    }
    return (
      <BrowserRouter>
        <div>
          <Route
            exact
            path="/"
            render={() => (
              <ul>
                {pages.map(page => (
                  <li>
                    <Link to={`/${page.id}`}>{page.title}</Link>
                  </li>
                ))}
              </ul>
            )}
          />
          <Route
            path="/:page"
            render={({ match }) => {
              const pageParam = Number(match.params.page);
              const page = pages.find(p => p.id === pageParam);

              return <div>{page.title}</div>;
            }}
          />
        </div>
      </BrowserRouter>
    );
  }
}

Ertan Hasani · Accepted Answer · 2019-04-16 14:57:15Z

0

Try using react-router-dom. Add a route in App.js like this:

<Route path='/posts/:id' component={DynamicData} />

And then you can get that id in your DynamicData component by:

this.props.match.params.id

answered Apr 16, 2019 at 14:57

Ertan Hasani

1,78316 silver badges27 bronze badges

Comments

Rafael Rocha · Accepted Answer · 2019-04-16 15:02:13Z

0

As mentioned above you can use react-router-dom for that or basically just use the Window.location object. It's already available out of the box so you don't need an external dependency.

answered Apr 16, 2019 at 15:02

Rafael Rocha

5181 gold badge4 silver badges16 bronze badges

Collectives™ on Stack Overflow

React component displaying dynamic data based on URL

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related