Debug it: React

Debug it: React
0

#1

Can anybody tell me what i’m doing wrong here:

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 code here
    const renderOnline = usersOnline.map( item =>
     <li>{item}</li>
    ); // change code here
    return (
       <div>
         <h1>Current Online Users:</h1>
         <ul>
           {renderOnline}
         </ul>
       </div>
    );
  }
};

Error in console is:
// running test
Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20{username%2C%20online}&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20{username%2C%20online}&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20{username%2C%20online}&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20{username%2C%20online}&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20{username%2C%20online}&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
// tests completed


#2

What is the challenge url?


#3

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


#4
  • {item.username}
  • solved it