寫著寫這竟然忘記了 conditional rendering 這回事XD
把這部分補回來

什麼是 conditional rendering

conditional rendering 就是 當符合某些條件時渲染出特定的 component
反之則將 component 隱藏

if .. else

if .. else 的語法是

if( 條件 ){ 條件為真時執行這邊 }else{ 條件不為真時執行這邊 }

幾例來說，如果 傳進來的 props.todos.lengtn == 0
顯示 沒有待辦事項，反之 顯示 props.todos 內的每項內容

const TodoItems = (props)=>{
    const {todos} = props;
    if (todos.length==0){
        return (<p>沒有待辦事項</p>)
    }
    else{
        return ( 
        <>
            <ul>
                {todos.map((eachItem)=> (<li>{eachItem}</li>))}
            </ul>
        </>)
    }
}

做一個點擊時執行把 props.todos 清空的按鈕
顯示如畫面

三元運算子 ternary operator

ternary operator 語法更簡易

條件 ? 當條件為真執行這裡 : 當條件不為真執行這裡

將整段 js 表達式用 {} 包起來
跟 if.. else 比起來更精簡，適合做比較短內容的條件

import React from 'react';

class Condition extends React.Component{
    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            isActive : false
        }
    }
    handleChange(){
        this.setState({isActive: !this.state.isActive});
    }
    render(){
        const {isActive} = this.state;
        return(
            <>
                <button onClick={this.handleChange}>Change state</button>
                {isActive ? <h1>isActive!!</h1> : null}
            </>
        )
    }
}

export default Condition;

return null

如果沒有要 return 的項目的話，可以 return null
在 component 內 return null 並不會影響 component 生命週期的 method

&&

在 js 中，true && expression 總是回傳 expression ，而 false && expression 總是回傳 false

true && expression  // return expression
false && expression  // return false

將上段改寫為..

return(
    <>
        <button onClick={this.handleChange}>Change state</button>
        {isActive && <h1>isActive!!</h1> }
    </>
)

跟上段有相同的效果