React warunek && dlaczego wyskakuje błąd

Question

Pytanie jak w temacie dlaczego wyskakuje mi następujący błąd

Uncaught Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

input wygląda tak

<input className='homePage__search-input' onFocus={this.handleFocus} onBlur={this.handleBlur} onChange={this.handleSearchChange} value={this.state.searchContent} style={this.state.focus && { border: '5px solid red' }}></input>

Oczywiście wiem, że jak zastosuję

style={this.state.focus ? { border: '5px solid red' }:{}}

wszystko będzie ok ale dlaczego nie mogę kożystać z && co jest ?

Czy ja powinienem jakoś inaczej zapisać ten warunek &&?

z góry dziękuje

Answer 1

Wrzuć sobie w konsolę coś takiego:

const flag = true;

console.log(flag && 'elo')

A później coś takiego:
 

const flag = false;

console.log(flag && 'elo')

 

Comments

Czyli oznacza to, że w znaczniku styli zawsze musi się znajdować choćby pusty obiekt. bo inaczej walnie tym błędem. ja myślałem, parsuje do styli napotka na false i przeskakuje dalej jak w dokumentacji

It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.

Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.

Dzięki bardzo

pozdrawiam