フォルダ構造:container/presenter

container = JavaScript / presenter = HTML

[Props]

コンテナから関数と変数をエクスポート

    return(
        <BoardWriteUI
            onChangeName={onChangeName}
            onChangePassword={onChangePassword}
            onChangeTitle={onChangeTitle}
            onChangeContent={onChangeContent}
            nameError={nameError}
            passwordError={passwordError}
            titleError={titleError}
            contentError={contentError}
            check={check}
            buttonColor={buttonColor}
        />
    )

関数と変数import

export default function BoardWirteUI(props){
    return (
        <>
            <Title zzz={props.zzz}>컨테이너 프리젠터 패턴</Title>
            작성자: <input type="text" onChange={props.onChangeMyWriter} /><br />
            제목: <input type="text" onChange={props.onChangeMyTitle} /><br />
            내용: <input type="text" onChange={props.onChangeMycontents} /><br />
            <Mybutton onClick={props.aaa} qqq={props.qqq}>GRAPHQL-API 요청하기</Mybutton>
        </>
    )
}

Stateのプロパティ

-ステータスが変化するたびに値を追加するのではなく、効率化のために値を一度に渡す

    function onChangeMyWriter(event) {
        setMyWriter(event.target.value)
        if(event.target.value !== "" && myTitle !== "" && myContents !== ""){
            setQqq(true)
        }
        else{
            setQqq(false)
        }
    }

ボタンの色を変更