Is there a way to toggle a HTML/JSX tag on React?

Question

I need to change the value of a tab depending on a value coming from a store.

Something like this:

<Svg {!homeScreenReduxStoreState ?
     fill={focused ? Colors.tabIconSelected : Colors.tabIconDefault} :
     fill={focused ? 'blue' : 'red'}} />

Or which could be the best way to perform this action?

Answer 1

Although this is correct and is usually done in this fashion, multiple ternary statements in your JSX code makes it very unreadable.

I would recommend assigning these values to a variable at the top of you render function and then using the variable here instead of doing it inline.

Something like:

render() {
  let fillColor = null;
  if(!homeScreenReduxStoreState) {
    fillColor = focused ? Colors.tabIconSelected : Colors.tabIconDefault; 
  } else {
    fillColor = focused ? 'blue' : 'red';
  }

  return <Svg fill={fillColor} />
}