Error: Objects are not valid as a React Child

Question

I want to display an object if the condition is false for which I was doing something like this in my stateful component return statement.

{ !this.state.searchCoin ?   {displayCrypto}   : null }

For this, it is throwing the following error

Objects are not valid as a React Child

My display crypto looks something like this (called in render)

let displayCrypto = CryptoData.map(el => {
    return (<CoinCard
       no={i++}
       key={el["short"]}
       coinShortName = {el["short"]}
       coinName = {el["long"]}
       coinPrice = {el["price"].toFixed(2)}
       marketCap = {(el["mktcap"]/1000000000).toFixed(4)}
       percentChange = {el["perc"].toFixed(2)}
       vwapData={el["vwapData"].toFixed(2)}
      />

[Question:] How can we I use itinerary expression to display on object if the condition is false?

Ps: If you are downvoting this question then please leave a comment as well so that I can improve my question as well.

Answer 1

You are wrapping the cryptoCoinCard components in brackets this prompts the error.

Remove the {} and it should work.

{ !this.state.searchCoin ? displayCrypto : null }

Answer 2

Just remove the {} : { !this.state.searchCoin ? displayCrypto : null } { !this.state.searchCoin ? displayCrypto : null }