title: Is there a cleaner way to write this React code?
body: <p>First time using react. Writing a piece of code where I want the element I click on to be highlighted, while the unselected elements get unhighlighted. Basically, I want the state to change to true based on the element I click, and the other states to be toggled to false.</p>
  
  <p>My question is, is there a more elegant to write this code? I originally tried to base it on <code>event.target</code> but I don't know how to bind a state to a specific element. While below does work for my purposes, I do wonder if there's a way to more dynamically use setState without having to write separate methods for each case...</p>
  
  <pre><code>
  export default class CharacterNav extends Component {
      constructor(props) {
          super(props);
          this.state = {
              profileHighlighted: true,
              recruitHighlighted: false,
              artsHighlighted: false,
              talentsHighlighted: false,
              affectionHighlighted: false,
          }
  
          this.changeProfileHighlight = this.changeProfileHighlight.bind(this);
          this.changeRecruitHighlight = this.changeRecruitHighlight.bind(this);
          this.changeArtsHighlight = this.changeArtsHighlight.bind(this);
          this.changeTalentsHighlight = this.changeTalentsHighlight.bind(this);
          this.changeAffectionHighlight = this.changeAffectionHighlight.bind(this);
          this.resetNavState = this.resetNavState.bind(this);
      }
  
      changeProfileHighlight () {
          this.setState({
              profileHighlighted: true,
              recruitHighlighted: false,
              artsHighlighted: false,
              talentsHighlighted: false,
              affectionHighlighted: false
          });
      }
      changeRecruitHighlight () {
          this.setState({
              profileHighlighted: false,
              recruitHighlighted: true,
              artsHighlighted: false,
              talentsHighlighted: false,
              affectionHighlighted: false
          });
      }
      changeArtsHighlight () {
          this.setState({
              profileHighlighted: false,
              recruitHighlighted: false,
              artsHighlighted: true,
              talentsHighlighted: false,
              affectionHighlighted: false
          });
      }
      changeTalentsHighlight () {
          this.setState({
              profileHighlighted: false,
              recruitHighlighted: false,
              artsHighlighted: false,
              talentsHighlighted: true,
              affectionHighlighted: false
          });
      }
      changeAffectionHighlight () {
          this.setState({
              profileHighlighted: false,
              recruitHighlighted: false,
              artsHighlighted: false,
              talentsHighlighted: false,
              affectionHighlighted: true
          });
      }
  
  
      render () {
          let divClass = this.props.characterSelected ?
                  "blueBackground" :"hideElement"; 
          let profilehighlightclass = this.state.profileHighlighted ? 'highlighted' : 'unhighlighted';
          let recruithighlightclass = this.state.recruitHighlighted ? 'highlighted' : 'unhighlighted';
          let artshighlightclass = this.state.artsHighlighted ? 'highlighted' : 'unhighlighted';
          let talentshighlightclass = this.state.talentsHighlighted ? 'highlighted' : 'unhighlighted';
          let affectionhighlightclass = this.state.affectionHighlighted ? 'highlighted' : 'unhighlighted';
  
          return(
              &lt;div&gt;
                  &lt;ul className={divClass}&gt;
                      &lt;li&gt;&lt;h3 onClick={this.changeProfileHighlight} name='profileHighlighted' className={profilehighlightclass}&gt;Profile&lt;/h3&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h3 onClick={this.changeRecruitHighlight} name='recruitHighlighted' className={recruithighlightclass}&gt;Recruitment&lt;/h3&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h3 onClick={this.changeArtsHighlight} name='artsHighlighted' className={artshighlightclass}&gt;Arts&lt;/h3&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h3 onClick={this.changeTalentsHighlight} name='talentsHighlighted' className={talentshighlightclass}&gt;Talents&lt;/h3&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h3 onClick={this.changeAffectionHighlight} name='affectionHighlighted' className={affectionhighlightclass}&gt;Affection&lt;/h3&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>