React - Use Array.filter() to Dynamically Filter an Array

JavaScript
1

Tell us what’s happening:

what happend? getting error message like this

{ [Invariant Violation: Minified React error #31; visit Minified React error #31 – React for the full message or use the non-minified dev environment for full errors and additional helpful warnings. ] name: ‘Invariant Violation’, framesToPop: 1 }
Invariant Violation: Minified React error #31; visit Minified React error #31 – React for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

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);  // Change this line
    const renderOnline = usersOnline.map(item => <li key={item.username}> {item.username} </li>); // Change this line
    return (
      <div>
        <h1>Current Online Users: {usersOnline}</h1>
        <ul>{renderOnline}</ul>
      </div>
    );
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Challenge Information:

React - Use Array.filter() to Dynamically Filter an Array

2

Hi there!

You only have item parameter, you also need to add a parameter for key. And use that parameter as the key value.

3

  • You are only asked to render renderOnline, as a list of names.

  • usersOnline is an array of objects, you can’t render that and are not asked to do so. Leave the h1 element as it was in the starting code.

  • You have to remove the two spaces inside your li elements or the test will fail.