Use Array.filter() to Dynamically Filter an Array map help

Use Array.filter() to Dynamically Filter an Array map help
0

#1

Tell us what’s happening:
I’m struggling to understand why the below code doesn’t work

Your code so far


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        {
          username: 'Jeff',
          online: true
        },
        {
          username: 'Alan',
          online: false
        },
        {
          username: 'Mary',
          online: true
        },
        {
          username: 'Jim',
          online: false
        },
        {
          username: 'Sara',
          online: true
        },
        {
          username: 'Laura',
          online: true
        }
      ]
    }
  }
  render() {
    const usersOnline = this.state.users.filter(user => user.online);
    const renderOnline = usersOnline.map(function (element) {
      return (<li key={element}>{element}</li>)}); // change code here
    return (
       <div>
         <h1>Current Online Users:</h1>
         <ul>
           {renderOnline}
         </ul>
       </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/use-array-filter-to-dynamically-filter-an-array


#2

Do you understand what element represents during each iteration of the map method’s callback function?


#3

Are you getting an error message?


#4

I’m getting this when trying to compile: https://reactjs.org/docs/error-decoder.html/?invariant=31&args[]=object%20with%20keys%20{username%2C%20online}&args[]=

And the code itself does nothing.


#5

I think so?

It passes over each element of the array and applies the function to them (in this case adding them in an

  • with a key value) and stores them in my new variable

  • #6

    What data type is element?


    #7

    each element should be an object which represents an online user

    edit: I’m not trying to change them though, just remap them…so if the error is because they are objects…how would I handle that?


    #8

    Yes, but the challenge states the following.

    Then, in the renderOnline variable, map over the filtered array, and return a li element for each user that contains the text of their username

    If element is an object of an online user, how to you reference the user’s username?


    #9

    Aha.

    So then I can map over them and just pull the usernames since I already know each user is online from the filter.

    Thereby I can map using element but then in the li instead of returning element can return element.username :smiley:

    Would it be possible/more efficient to map using element.username or just keep it as element and only return username?

    Edit: Just tried it mapping by element.username and doesn’t allow it.
    Here’s the working code:

    const usersOnline = this.state.users.filter(user => user.online);
        const renderOnline = usersOnline.map(function(element){return (<li key={element.username}>{element.username}</li>)});
    

    #10

    If I have the following object, how do I access obj’s prop2 value?

    var obj = {
      prop1: 'some value',
      prop2: true
    }
    

    If you do not know the answer, you should probably review the following challenges again.

    https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures/access-property-names-with-bracket-notation/

    https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming/use-dot-notation-to-access-the-properties-of-an-object


    #11

    You could also desctructure username property from the object passed to the map callback function like:

    const renderOnline = usersOnline.map(function({username}){return (<li key={username}>{username}</li>)});