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;
Please login or Register to submit your answer

Log In

Not the answer you are looking for? Browse other questions tagged or ask your own question.