title: How to add conditional operator with string in react
body: <p>I'm making a list using React-JS. I'm struggling to sort the data using conditional operator.</p>
  
  <ul>
  <li>There is a list of friends (with inputs for name and gender).</li>
  <li>Data should be sorted according to gender.</li>
  <li>When you click the 'male' button, only the item with 'male' value should show and the value with 'female' should be hidden.</li>
  <li>When you click the 'female' button, only the item with 'female' value should show and the value with 'male' should be hidden.</li>
  </ul>
  
  <p>I added the conditional operator but it didn't work. The conditional operator with 'string' will work in React?</p>
  
  <pre><code>style={{ display : this.state.male &amp;&amp; friend.gender == "male" ? "block" : "none" }}
  </code></pre>
  
  <p><strong>List.js</strong></p>
  
  <pre><code>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 (
              &lt;div&gt;
                  &lt;button onClick={this.maleButton.bind(this)}&gt;Male&lt;/button&gt;
                  &lt;button onClick={this.femaleButton.bind(this)}&gt;Female&lt;/button&gt;
                  &lt;ul className={styles.friendList}&gt;
                      {
                          this.props.friends.map((friend, index) =&gt; {
                              return (
                                  &lt;FriendListItem
                                      key={index}
                                      id={index}
                                      name={friend.name}
                                      starred={friend.starred}
                                      gender={friend.gender}
                                      style={{ display : this.state.male &amp;&amp; friend.gender == "male" ? "block" : "none" }}
                                      {...this.props.actions} /&gt;
                              );
                          })
                      }
                  &lt;/ul&gt;
              &lt;/div&gt;
          );
      }
  }
  
  FriendList.propTypes = {
      friends: PropTypes.array.isRequired,
      actions: PropTypes.object.isRequired
  };
  
  export default FriendList;
  </code></pre>
  
  <p>The data will be like this:</p>
  
  <pre><code>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'
      }]
  };
  </code></pre>