I am confused with filter and map functions. I am nesting them. Please point me in the right direction

Question

What i am trying to do in nested functions is, selecting a book from books dictionary(new to react, they call these dictionaries in python) and then finding an object in charts array who has this book id, then i go to peeps array and display that person's name.

I want to have an output like follows:

<div>
  <h2>Jokes 101</h2>
    <p>Liked By:</p>
    <ul>
      <li>Muneeb</li>
      <li>Osama</li>
    </ul>
</div>

---

import React, { Component } from 'react';
import './App.css';
import logo from './logo.svg';

const chart = [
  {
    id: 1,
    peepsID: '1',
    bookLikedID: '1',
  },
  {
    id: 2,
    peepsID: '2',
    bookLikedID: '1',
  },
  {
    id: 3,
    peepsID: '4',
    bookLikedID: '5',
  },
  {
    id: 4,
    peepsID: '5',
    bookLikedID: '2',
  },
  {
    id: 5,
    peepsID: '3',
    bookLikedID: '5',
  },
  {
    id: 6,
    peepsID: '6',
    bookLikedID: '4',
  },
];

const peeps = {
  1: {
    id: 1,
    name: 'Fazal Deen',
    readerCategory: 'champ',
  },
  2: {
    id: 2,
    name: 'Irfan',
    readerCategory: 'rising-star',
  },
  3: {
    id: 3,
    name: 'Muneeb',
    readerCategory: 'beginner',
  },
  4: {
    id: 4,
    name: 'Osama',
    readerCategory: 'champ',
  },
  5: {
    id: 5,
    name: 'Najam',
    readerCategory: 'champ',
  },
  6: {
    id: 6,
    name: 'Aamir',
    readerCategory: 'beginner',
  },
};

const books = {
  1: {
    id: 1,
    name: 'Imran Series',
  },
  2: {
    id: 2,
    name: 'Harry Potter',
  },
  3: {
    id: 3,
    name: 'I Am Malala',
  },
  4: {
    id: 4,
    name: 'Bang-e-Dara by Allama Iqbal',
  },
  5: {
    id: 5,
    name: 'Jokes 101',
  },
};

class App extends Component {
  render() {
    return (
      <div>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">React Bootcamp - Train the Trainer - Coding Practice</h1>
        </header>
        <h2>Book People liked</h2>
        { books.map(
          value => <div><h2>{value.name}</h2> <p>Liked by:</p> 
          <ul>{chart.filter(
            chartVal => value.id == chartVal.bookLikedID,
            <li>{peeps.filter(
              people => people.id == chartVal.peepsID)}
            </li>
          )}</ul>
          </div>
        )}
      </div>
    );
  }
}

export default App;

I am getting an error: "./src/App.js Line 116: 'chartVal' is not defined no-undef"

Answer 1

class App extends Component {
  render () {
    return (
      <div>
        <header className='App-header'>
          <img src={logo} className='App-logo' alt='logo' />
          <h1 className='App-title'>
            React Bootcamp - Train the Trainer - Coding Practice
            {chart.map(obj => {
              !array[obj.bookLikedID]
                ? (array[obj.bookLikedID] = [obj.peepsID])
                : array[obj.bookLikedID].push(obj.peepsID)
            })}
          </h1>
        </header>
        <h2>Book People liked</h2>
        {Object.values(books).map(book => {
          return (
            <div>
              {array[book.id] ? (
                <div>
                  <span> Books:{book.name}</span>
                  <ul>
                    {array[book.id].map(id => {
                      return <li>{peeps[id].name}</li>
                    })}
                  </ul>
                </div>
              ) : (
                <div>
                  <span>Books:{book.name}</span>
                  <p>No one like the books</p>
                </div>
              )}
            </div>
          )
        })}
      </div>
    )
  }
}

simple solution is here...

Answer 2

What you want to achieve could be done this way:

const chart = [
  {
    id: 1,
    peepsID: "1",
    bookLikedID: "1",
  },
  {
    id: 2,
    peepsID: "2",
    bookLikedID: "1",
  },
  {
    id: 3,
    peepsID: "4",
    bookLikedID: "5",
  },
  {
    id: 4,
    peepsID: "5",
    bookLikedID: "2",
  },
  {
    id: 5,
    peepsID: "3",
    bookLikedID: "5",
  },
  {
    id: 6,
    peepsID: "6",
    bookLikedID: "4",
  },
];

const peeps = {
  1: {
    id: 1,
    name: "Fazal Deen",
    readerCategory: "champ",
  },
  2: {
    id: 2,
    name: "Irfan",
    readerCategory: "rising-star",
  },
  3: {
    id: 3,
    name: "Muneeb",
    readerCategory: "beginner",
  },
  4: {
    id: 4,
    name: "Osama",
    readerCategory: "champ",
  },
  5: {
    id: 5,
    name: "Najam",
    readerCategory: "champ",
  },
  6: {
    id: 6,
    name: "Aamir",
    readerCategory: "beginner",
  },
};

const books = {
  1: {
    id: 1,
    name: "Imran Series",
  },
  2: {
    id: 2,
    name: "Harry Potter",
  },
  3: {
    id: 3,
    name: "I Am Malala",
  },
  4: {
    id: 4,
    name: "Bang-e-Dara by Allama Iqbal",
  },
  5: {
    id: 5,
    name: "Jokes 101",
  },
};

const e = React.createElement;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { chart, peeps, books };
  }

  getPeeps(bookId) {
    return chart
      .filter(c => bookId == c.bookLikedID)
      .map(c => Object.values(peeps).find(p => p.id == c.peepsID))
      .map(p => <li key={p.id}>{p.name}</li>);
  }

  render() {
    return (
      <div>
        <header className="App-header">
          <h1 className="App-title">
            React Bootcamp - Train the Trainer - Coding Practice
          </h1>
        </header>
        <h2>Book People liked</h2>
        {Object.values(books).map(book => (
          <div key={book.id}>
            <h2>{book.name}</h2>
            <p>Liked by:</p>
            <ul>{this.getPeeps(book.id)}</ul>
          </div>
        ))}
      </div>
    );
  }
}

const domContainer = document.querySelector("#app");
ReactDOM.render(e(App), domContainer);

<body>

<div id="app"></div>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

</body>

Although I would convert books and peeps to arrays, rename peeps to people, chart to charts, and in charts convert string ids to numbers, like so:

const charts = chart.map(c => Object.assign(c, 
 {peepsID: parseInt(peepsID), bookLikedID: parseInt(bookLikedID)}))

Answer 3

Your problem is not specific to React. It is specific to Javascript.

Here is what you want:

                    <ul>
                        {chart
                            .filter(chartVal => value.id == chartVal.bookLikedID)
                            .map(chartVal => (
                                <li>
                                    {peeps.filter(people => people.id == chartVal.peepsID)}
                                </li>
                            ))}
                    </ul>

That is how you would chain a filter and a map together.

Here is the whole component:

class App extends Component {
    render() {
        return (
            <div>
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">
                        React Bootcamp - Train the Trainer - Coding Practice
                    </h1>
                </header>
                <h2>Book People liked</h2>
                {Object.values(books).map(value => (
                    <div>
                        <h2>{value.name}</h2> <p>Liked by:</p>
                        <ul>
                            {chart
                                .filter(chartVal => value.id == chartVal.bookLikedID)
                                .map(chartVal => (
                                    <li>
                                        {peeps.filter(people => people.id == chartVal.peepsID)}
                                    </li>
                                ))}
                        </ul>
                    </div>
                ))}
            </div>
        )
    }
}

Answer 4

Sorry to say but its not react from react side its javascript where you need to work out. You can not loop over object using map method so first you need to convert it into array.

Object.values(books).map(item => { console.log(*item.your_value_name*)})