How to add conditional operator with string in react - list

Question

I'm making a list using React-JS. I'm struggling to sort the data using conditional operator.
There is a list of friends (with inputs for name and gender).
Data should be sorted according to gender.
When you click the 'male' button, only the item with 'male' value should show and the value with 'female' should be hidden.
When you click the 'female' button, only the item with 'female' value should show and the value with 'male' should be hidden.
I added the conditional operator but it didn't work. The conditional operator with 'string' will work in React?
style={{ display : this.state.male && friend.gender == "male" ? "block" : "none" }}
List.js
class FriendList extends Component {
constructor(props, context) {
super(props, context);
this.state = {
male: false,
female: false
}
}
maleButton(e) {
this.setState({
male: !this.state.male
});
}
femaleButton(e) {
this.setState({
female: !this.state.female
});
}
render() {
return (
<div>
<button onClick={this.maleButton.bind(this)}>Male</button>
<button onClick={this.femaleButton.bind(this)}>Female</button>
<ul className={styles.friendList}>
{
this.props.friends.map((friend, index) => {
return (
<FriendListItem
key={index}
id={index}
name={friend.name}
starred={friend.starred}
gender={friend.gender}
style={{ display : this.state.male && friend.gender == "male" ? "block" : "none" }}
{...this.props.actions} />
);
})
}
</ul>
</div>
);
}
}
FriendList.propTypes = {
friends: PropTypes.array.isRequired,
actions: PropTypes.object.isRequired
};
export default FriendList;
The data will be like this:
const initialState = {
friendsById: [{
name: 'Theodore Roosevelt',
starred: true,
gender: 'male'
}, {
name: 'Abraham Lincoln',
starred: false,
gender: 'male'
}, {
name: 'George Washington',
starred: false,
gender: 'male'
}, {
name: 'Hillary Clinton',
starred: false,
gender: 'female'
}]
};

Answer 1

Maybe change your approach a little bit and filter results first:
this.props.friends
.filter(friend =>
this.state.male && friend.gender === 'male' ||
this.state.female && friend.gender === 'female'
)
.map((friend, index) => ...)
Unless you need to display both male and female genders at the same time, another suggestion I give you is to remove duplication per se (with both boolean values in state) and store a single gender value as string for example. With that, filtering approach becomes even easier to understand:
this.props.friends
.filter(friend => friend.gender === this.state.gender)
.map((friend, index) => ...)

Answer 2

You can use .filter for that purpose instead of .map.For that you can simply do as:
{
this.props.friends.filter((friend, index) => {
if((this.state.male && friend.male) || (this.state.female && friend.female)) {
return (
<FriendListItem
key={index}
id={index}
name={friend.name}
starred={friend.starred}
gender={friend.gender}
style={{ display : "block" }}
{...this.props.actions} />
);
}
})
}