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

Everything works OK. It outputs correctly.
Error msg:
act(…) is not supported in production builds of React, and might not behave as expected
Describe your issue in detail here.

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 === true); // Change this line
    const renderOnline = usersOnline.map(user => <li key = {user.username} > {user.username} </li>); // Change this line
    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; rv:109.0) Gecko/20100101 Firefox/113.0

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

Link to the challenge:

Notice there are spaces added before and after the username in the li element.

I’m not sure about the act(…) error.

The act error it’s an error of the test suits.
It should be an error due to the test of freecodecamp not of your code.
Are you able to pass the challenge ?

You are adding extra spaces into the li element instead of only including the username

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.