如何让我的菜单逻辑更简洁？

Question

The code below updates my menu system. Each menu items is in an if statement.

The problem is that I have to set the style for each item. So as I add items the logic gets huge.

The menu of course turns its corresponding div on and off.

How can I make this more concise?

var style_1;
var style_268;
var style_280;
if (this.props.MenuFave.current === '1') {
  style_1 = {
    display: 'inline-block'
  };
  style_280 = {
    display: 'none'
  };
  style_268 = {
    display: 'none'
  };
}
if (this.props.MenuFave.current === '280') {
  style_280 = {
    display: 'inline-block'
  };
  style_1 = {
    display: 'none'
  };
  style_268 = {
    display: 'none'
  };
}
if (this.props.MenuFave.current === '268') {
  style_268 = {
    display: 'inline-block'
  };
  style_280 = {
    display: 'none'
  };
  style_1 = {
    display: 'none'
  };
}

JSX

  <div id = 'fave_hold'>
    <div className = 'faves' id = 'fave_hold_arc' style={style_1} >
      {tags1}
    </div>
    <div className = 'faves' id = 'fave_hold_news' style={style_280}>
      {tags280}
    </div>
    <div className = 'faves' id = 'fave_hold_sw' style={style_268}>
      {tags268}
    </div>
  </div>

Answer 1

You can just hide menu item, do not render:

{this.props.MenuFave.current !== '1' ? (
<div className = 'faves' id = 'fave_hold_arc' >
  {tags1}
</div>
) : null}
....

Answer 2

You can do it inside your JSX as follows:

<div id = 'fave_hold'>
    {this.props.MenuFave.current === '1'?
    <div className = 'faves' id = 'fave_hold_arc'  >
      {tags1}
    </div>:null}
    {this.props.MenuFave.current === '280'?
    <div className = 'faves' id = 'fave_hold_news' >
      {tags280}
    </div>:null}
    {this.props.MenuFave.current === '268'?
    <div className = 'faves' id = 'fave_hold_sw' >
      {tags268}
    </div>:null}
 </div>

Answer 3

Create an object with all of your values and object deconstruct

const menuStyles = {
  1: {
    display_1: 'inline-block',
    display_280: 'none',
    display_268: 'none'
  },
  280: {
    display_1: 'none',
    display_280: 'inline-block',
    display_268: 'none'
  },
  268: {
    display_1: 'none',
    display_280: 'none',
    display_268: 'inline-block'
  }
}
const currentStyle = menuStyles[this.props.MenuFave.current]
const {display_1, display_280, display_268} = currentStyle
const style_1 = {display: display_1}
const style_268 = {display: display_268}
const style_280 = {display: display_280}