React how to reach objects in JSON file

Question

I am coding some project and I have a json file with objects. In my JSON file there is list of users. I did imported that list to a component with a table. Now i have nice table with list of users and their details. What I want to do next is to make 'details' button in every row and onClick button shoud load all info about user in other component which will be rendered next to the table. basically what i want to make is a list of users in right side and details about specific user on the left side. Table doesnt change, changes only left side component with users information. Biggest problem is that i know how to load json file to table from http://localhost:3000/users.json, but i dont know how to reach certain objects by their id's. for example http://localhost:3000/users/1

My container to load json:

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

class UserListContainer extends Component {
  constructor(props){
    super(props);

    this.state = {
      users: []
    };
  }
  componentWillMount(){
    var self = this;
    axios.get('http://localhost:3000/users.json')
    .then((response) => {
      self.setState({ users: response.data });
    })
  }
  render(){
    return(
      <UserListComponent users={this.state.users} />
    );
  }
}

export default UserListContainer;

this is users tables component:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

class UserCardComponent extends Component {
  render(){
    return(
      <tr className='clickable-row' data-href='url://'>
        <td>{this.props.id}</td>
        <td>{this.props.name}</td>
        <td>{this.props.surname}</td>
        <td>{this.props.city}</td>
        <td>{this.props.email}</td>
        <td>{this.props.phone}</td>
        <Link to={'/user/'+this.props.id} className="btn btn-primary">Details</Link>
      </tr>
    );
  }
}

UserCardComponent.propTypes = {
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  surname: PropTypes.string.isRequired,
  city: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  phone: PropTypes.string.isRequired
};

export default UserCardComponent;

and there is my index.js:

import '../node_modules/bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import UserDetails from './UserDetails';
import ContentComponent from './ContentComponent';
import registerServiceWorker from './registerServiceWorker';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
import jQuery from 'jquery'
global.jQuery = jQuery
global.jquery = jQuery // jquery lowercase  was the solution
global.$ = jQuery
let Bootstrap = require('bootstrap')

ReactDOM.render(
  <Router>
    <App>
      <Route exact path="/" component={ContentComponent} />
      <Route path="contact/:id" component={UserDetails} />
    </App>
  </Router>, document.getElementById('root'));
registerServiceWorker();

My users.json file:

[{
    "id": 1,
    "name": "Pempe",
    "surname": "Pampino",
    "city": "Torino",
    "email": "Asde@dt.com",
    "phone": "+568888",
    "active": true
}, {
    "id": 2,
    "name": "John",
    "surname": "Johnson",
    "city": "Moscow",
    "email": "john.johonson@moscow.ru",
    "phone": "+216545646",
    "active": true
}, {
    "id": 3,
    "name": "Anton",
    "surname": "Antonov",
    "city": "Los Angeles",
    "email": "Antonov.an@tri.ru",
    "phone": "+5654448",
    "active": true
}]

P.S. Sorry for my english.

Possible duplicate of [Pass object through Link in react router](https://stackoverflow.com/questions/31168014/pass-object-through-link-in-react-router) — whiplassh, Dec 27 '17 at 14:13

score 0 · Answer 1 · answered Dec 27 '17 at 14:10

You can use filter method to filter only value with specified id.

function getUserById(id) { return this.state.users.filter(x => (x.id === id))[0] }

Be aware, that this code assumes that user with specified id exists.

This code can be used in React component, or you can create specific endpoint on your server.

score 0 · Answer 2 · answered Dec 27 '17 at 14:12

In the UserDetails component (i'm not sure how it looks like in your case), you will have the id of the user, so you basically need to do something similar what you do in UserListContainer componentWillMount method, that is: load the users, then filter out the list that has the user id.

React how to reach objects in JSON file

2 Answers2