Connect with us

javascript – Filtering A List With React

1. <Filters/> child component of <List/>
2. Both <List/> and <Filters/> are children of a parent components.
3. <Filters/> and <List/> live in different root components.

import React from 'react';

class Empe extends React.Component {
  render() {
    let friends = this.props.list.filter( function (empe) {
      return empe.friend === true
    });

    let nonFriends = this.props.list.filter( function (empe) {
      return empe.friend !== true
    });

    return (
      <div>
        <h1>Friends:</h1>
        <ul>
          {friends.map(function (empe) {
            return <li key={empe.name}>{empe.name}</li>
          })}
        </ul>
        <h1>Non Friends:</h1>
        <ul>
          {nonFriends.map(function (empe) {
            return <li key={empe.name}>{empe.name}</li>
          })}
        </ul>
      </div>
    );
  }
}

export default Empe;

Your Answer

Please login or Register to submit your answer
Not the answer you are looking for? Browse other questions tagged or ask your own question.

Log In

Subscribe to our newsletter

Enter your email address to subscribe to blog and receive notifications of new articles by email.
100% Privacy. No spam guaranteed