Yes, it's valid, and it runs fine in Chrome:

var a, b, c;

a = 6;
b = 7;
c = a !== b ? (a = 1, b = 2) : (a = 2, b = 1);
console.log("a = " + a);
console.log("b = " + b);
console.log("c = " + c);

I'm not saying it's a remotely good idea in code humans are meant to read. :-) I expect jamietre is correct in the comments when he/she says it looks like the result of minification.

The comma operator is a binary operator (an operator accepting two operands). It evaluates its left-hand operand (thus causing any side-effects it has, such as assignment), throws that result away, then evalutes its right-hand operand (thus causing its side-effects if any) and takes that result as its result value. If you have multiple comma operators in a row, the overall expression is evaluated in order, left-to-right, with the final result being the value resulting from the right-most operand evaluation.

And of course, you know the conditional operator (a ternary operator — one accepting three operands) is used to pick one of two sub-expressions to evaluate, on the basis of an initial expression.

So that line is very...expressive...what with a total of seven* different expressions inside it.

So in that example, the result of the overall expression is 2 if a !== b initially, or 1 if a === b initially, with the side-effects of setting a and b.

It's the side effects that make it, in my view, a questionable choice. And of course, there's no reason to use the comma operator if the left-hand operand doesn't have side effects.

* Yes, seven of 'em packed into that overall ternary:

• a !== b
• the first comma expression
• a = 1
• b = 2
• the second comma expression
• a = 2
• b = 1

Re your edit with the actual statement, that one works too:

function test(a) {
    var b = 7,
        d = 1,
        e = 2,
        f = 3,
        g = 4,
        h = 5,
        i = 6;
    
    a!==0?b<0?(h=b/a,e=h-1,f=-2*b+2*a*e,i=-2*b+2*a*h,d=2*h*a-2*b-2*a):(h=b/a,e=h+1,f=2*b-2*a*e,i=2*b-2*a*h,d=-2*h*a+2*b):d=h=e=f=i=0;
    
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("d = " + d);
    console.log("e = " + e);
    console.log("f = " + f);
    console.log("g = " + g);
    console.log("h = " + h);
    console.log("i = " + i);
}

test(0);
test(1);

.as-console-wrapper {
  max-height: 100% !important;
}

But wow, I hope this is minified, because if a person wrote that, they must really have a thing against anyone who's supposed to maintain it later... ;-)

You could do the following:

<div style={{'backgroundColor': status === 'approved' ? 'blue' : status === 'pending' ? 'black' : 'red'}}>
</div>

This means if status === 'approved' set the background color as blue, if status === 'pending' set it as black, else set it as red.

Specifically, the problem is that the ternary operator resolves into something that is then evaluated by whatever is on the left of the ternary.

For example

const x = condition
          ? result1
          : result2;

but if there's nothing on the left of the ternary, it doesn't do anything except side effects, which are done much more clearly with if statements. (you should also probably use if/else if your code is more complicated than can reasonably fit on a single line)

Maybe you wanted

if (!auth.isAuthenticated()) return (
  <whateverComp auth={auth} {...props} />
);
sessionStorage.setItem('page_name', 'dashboard');
return (
  <Redirect to="/log-in"/>
);

try this,

    return (
    <View>
    {item.diaryClass.name === "pack" && item.diaryId === 778 ?  
    (<Text>
        chicken
    </Text>)
    :
    (null)
    
    }
    
    
    {item.diaryClass.name === "pack" && item.diaryId === 776 ?  
    (<Text>
        buger
    </Text>)
    :
    (null)
    }
    
    
    {item.diaryClass.name === "pack" && item.diaryId === 775 ?  
    (<Text>
        pizza
    </Text>)
    :
    (null)
    
    }
    </View>
    )

<h1 id="largeh1">
   {
     isEnvironmentBFE
     ? (
         outputEnFr(
           "BFE Environment English Text",
           "BFE Environment French Text",
           this.props.lang
         )
     ) : NEW CONDITIONAL HERE
     ? (NEW RESULT)
     : (
         outputEnFr(
           "Acme Environment English Text",
           "Acme Environment French Text",
           this.props.lang
         )
     )
   }
</h1>

This is equivalent to

if(isEnvironmentBFE)
  //yadda
else if (foo)
  //yadda yadda
else 
  //yadda

The condition '/work' || '/wip' || '/journal' will always return '/work' since it is considered a true value, so there is no need to check the other OR conditions. This is why it works for '/work' and nothing else.

I would like to recommend two approaches for this:

One is to write a straight forward function that returns true/false based on the pathname provided.

function checkUrl(pathname) {
    if (pathname === '/work' || pathname === '/wip' || pathname === '/journal') {
    return true;
  }
  return false;
}

<FooterContainer theme={ checkUrl(window.location.pathname)  ? 'dark' : 'light' }>

Or a second approach to make an array with the dark theme compatible pathnames and check if the current window.location.pathname is in this array.

var darkThemePathnames = ['/work', '/wip', '/journal'];
<FooterContainer theme={ darkThemePathnames.includes(window.location.pathname) ? 'dark' : 'light' }>

If you would like to shorten it even more then you can just do:

<FooterContainer theme={ ['/work', '/wip', '/journal'].includes(window.location.pathname) ? 'dark' : 'light' }>

You could return an array of components:

{
  views === "monthly"
  ? [this.renderDays(), this.renderCells()]
  : null
}

Or if the methods return arrays itself, just spread them:

 {
  views === "monthly"
  ? [...this.renderDays(), ...this.renderCells()]
  : null
}