0

I have the following code in index.js which dipslay all employee information from json file. --- codesandboxCode ---

return (
      <div className="App">
        <input
          value={this.state.input}
          type="text"
          onChange={e => this.onSearchTextChange(e.target.value)}
        />
        <List divided>
          {cardData.data.Table.map(results => (
              <div class="body">
                  <h3 className="title">{results.first_name}</h3>
                  <div className="row">
                    <div className="col-md-3 col-sm-6">
                      {" "}
                      Department: {results.Department}
                    </div>
                  </div>
                  {/* row for Location cubicle Prof  */}

                  <Link
                    to={{ pathname: `/cards/${results.id}`, state: results }}
                    className={`card-wrapper restore-${results.id}`}
                  >
                    display
                  </Link>
                </div>
          ))}
        </List>
       </div>
    );

I also have details.js file which display selected employee detail information as follows

render() {
    const id = this.props.match.params.id;
    const data = cardData.data.Table.find(item => item.id === id);
    return (
      // Card details compoment
      <div className="card-details">
        <h2>{data.first_name}</h2>
        <h2>{data.id}</h2>

        <Link
          to={{
            pathname: "/",
            state: this.props.location.state
          }}
        >
          <button>Return to list</button>
        </Link>
      </div>
    );

How can i display employees in the same department name in the selected record detail Page?. I have data i have a data as shown below on employee 1001 detail page i would like to show Id and first_name of employee with id 1003 because both in the same department

"data": {
    "Table": [
      {
        "id": "1001",
        "first_name": "Alez",
        "Department": "IT"
      },
      {
        "id": "1002",
        "first_name": "Baro",
        "Department": "Accounting"
      },
      {
        "id": "1003",
        "first_name": "Tata",
        "Department": "IT"
      },
Rob
  • 161
  • 2
  • 16
  • Group by department? – Kevin Dec 07 '19 at 05:37
  • @Kuku you want all employees of same department in one list? – akhtarvahid Dec 07 '19 at 05:37
  • @VahidAkhtar yes i will do use Carousel – Rob Dec 07 '19 at 05:38
  • use department as path parameter not employee Id. – Junius L Dec 07 '19 at 05:39
  • @JuniusL. you don't get what i am wanted to accomplish i want the detail page to be the selected employee information by ID but i want to show employees related in the same page at the bottom of the page which share the sameDepartment or same supervisor something like that, just like when you purchase item you see related items – Rob Dec 07 '19 at 05:43

1 Answers1

1

Use filter to filter by department in your details page, and only show eployees in that department.

const relatedTo = cardData.data.Table.filter(
  item => item.Department === data.Department && item.id !== data.id
);

in your Details.js render method change your code to the following.

render() {

  const id = this.props.match.params.id;
  const data = cardData.data.Table.find(item => item.id === id);

  const relatedTo = cardData.data.Table.filter(
    item => item.Department === data.Department && item.id !== data.id
  );

  return (
    // Card details compoment
    <div className="card-details">
      <h2>{data.first_name}</h2>
      <h2>{data.id}</h2>

      <h3>Works with: </h3>
      {relatedTo &&
        relatedTo.map(emp => (
          <div>
            <h4>{emp.first_name}</h4>
            <h4>{emp.id}</h4>
          </div>
        ))}

      <Link
        to={{
          pathname: "/",
          state: this.props.location.state
        }}
      >
        <button>Return to list</button>
      </Link>
    </div>
  );
}
Junius L
  • 15,881
  • 6
  • 52
  • 96