JSONからのデータからReactJSでif/else条件が満たされたときにdivを表示/非表示する方法は？

Question

Reactで条件が満たされたとき、データがJSON配列から来たときにdivを表示/非表示にするにはどうすればよいですか？これまでのところこのコードがありますが、isPassed={resultPass.pass}の値をisPassed={resultPass.failed}に変更すると、結果はまだpassという結果が表示されます。

私が見つけた最も近い例はthisですが、JSON（コード内のresultPass）から値をフェッチしませんが、true/false値をconstに割り当てます。

var resultPass = { 
    "pass": "passpass", 
    "fail": "failfail" 
} 

function Passed(props) { 
    return <div class="result-pass"><h3>passpass</h3></div>; 
} 

function Failed(props) { 
    <div class="result-fail"><h3>failfail</h3></div>; 
} 

function ResultDisplay(props) { 
    const isPassed = props.isPassed; 
    if (isPassed) { 
    return <Passed />; 
    } 
    return <Failed />; 
} 

// When resultPass.pass is changed resultPass.fail it still shows as pass 
render(<ResultDisplay isPassed={resultPass.pass} />, document.getElementById('root')); 

ここは私のCodesandboxです。

Answer 1

ResultDisplayの小道具を正しくチェックしていません。

const isPassed = props.isPassed; 
    if (isPassed) { 
    return <Passed />; 
    } 
    return <Failed />; 

isPassed文字列「パスパス」または「failfail」のいずれかが、あなたのif文は、基本的な等価性チェックを行っているので、trueブール値にあなたの文字列の両方を変換するタイプであるだろう。したがって、ifの文は常にtrueと評価され、常に<Passed />が返されます。

文字列の等価性をチェックする適切な方法は、型を変換しないように厳密な同一性演算子（===）を使用し、完全に同じ文字列を確認することです。

const isPassed = props.isPassed; 
    if (isPassed === "passpass") { 
    return <Passed />; 
    } 
    return <Failed />; 

また、それ以外の場合は正常に動作しません、あなたのFailed()機能が何かを返すことを確認する必要があります。 「失敗した不変違反 （...）：

function Passed(props) { 
    return <div class="result-pass"><h3>passpass</h3></div>; 
} 

function Failed(props) { 
    return <div class="result-fail"><h3>failfail</h3></div>; 
} 

Answer 2

if (isPassed) {は常にtrueと評価されるためです。このようなif条件を正しく確認する必要があります

if (isPassed === "passpass") { 
    return <Passed />; 
    } 
    return <Failed />;