最初から表示されているボタンをイベントが発生してから表示されるようにしたい

Question

前提・実現したいこと

エラーが出ているわけではないのですが、Buttonコンポーネントにあるボタンを押すとtask,dead, timeと削除ボタン、詳細ボタンが表示されるTodoアプリを作っています。task,dead,timeについては初期値を''にすることで一番最初は表示されないようになっているのですが、削除ボタンと詳細ボタンについては最初から表示されてしまいます。ボタン（Buttonコンポーネント）を押したら新たに作成されるようにしたいです。何もしていない状態から（Buttonをクリックする前から）削除ボタンと詳細ボタンが出てきてしまっているので、これをButtonをクリックしてから出てくるようにしようと思うのですが、調べても解決法が見つかりませんでした。何か良い方法はありますでしょうか。

発生している問題

エラーは特に出ているわけではないのですが、Buttonを押す前に詳細ボタンと削除ボタンが表示されてしまっているのを消したいです。消したいのは最初だけであとから追加する分はtask,dead,timeと一緒に追加していきたいです。

該当のソースコード

import classes from './taskinput.module.css'
import React, { useState } from 'react';

import Button from './button'
import styled from 'styled-components';
import { withRouter } from 'react-router-dom'

const getKey = () => Math.random().toString(32).substring(2);

function Taskinput({ history }) {

    const moveToTaskDetail = (e) => {
        history.push("/taskDetail");
    }


    //タスクの追加
    const initialState = [
        {
            task: '',
            time: '',
            dead: '',
            message: '',
            arr: '',
            isCompleted: false
        },

    ]

    const [todos, setTodo] = useState(initialState);


    const [task, setTask] = useState('')

    const handleNewTask = (event) => {
        setTask(event.target.value)
    }

    //タスクにかかる時間について
    const [time, setTime] = useState('1h')

    /*  const options = [
 
     ] */





    console.log(time)
    //taskにかかる時間のselect
    const dead_Time = [
        { value: "1", label: "1h", id: "1", },
        { value: "2", label: "2h", id: "2", },
        { value: "3", label: "3h", id: "3", },
        { value: "4", label: "4h", id: "4", },
        { value: "5", label: "5h", id: "5", },
        { value: "6", label: "6h", id: "6", }
    ]



    const Change = e => {
        setTime(e.target.value)
    }


    let slicetime = time.slice(0, 1)
    let getSlicetime = slicetime * 3600000
    //taskの締め切りについて
    const deadTask = dead_Time.map(deadtask => {
        return (
            <option key={deadtask.value}>{deadtask.id}h</option>
        )
    })
    //締め切りの日にち
    const [dead, setDead] = useState('')
    let today = new Date()
    let nowdate = today.getTime()
    let deadTime = Date.parse(new Date(dead))

    let differdate = deadTime - nowdate - getSlicetime

    /*    console.log(today) */
    let classAdd = false


    //differdateを並べておく配列
    const [arr, setArr] = useState('')

    /*     const [message, setMessage] = useState(initialState) */

    //plusbuttonクリック時のイベント
    const handleSubmit = (event) => {
        event.preventDefault()
        classAdd = true
        if (task === '') return
        const tmpTodo = [...todos, { task, time, dead, arr: differdate,/*  message: `${year}`"年", */ isCompleted: false }]

        setTask('')
        setArr(tmpTodo)
        tmpTodo.sort(function (a, b) {
            console.log(a.arr)
            if (a.arr < b.arr) {
                return -1;
            }
            if (a.arr > b.arr) {
                return 1
            }
            return 0;
        })
        setTodo(tmpTodo)

        console.log(classAdd)
    }



    /* console.log(message) */
    //task削除
    const handleRemoveTask = index => {
        const newTodos = [...todos]
        newTodos.splice(index, 1)
        setTodo(newTodos)

    }




    console.log(Date.parse(new Date(dead)))

    return (
        <>

            <div className={classes.todolist}>

                <div>
                    <form >
                        Add Task : <input value={task} placeholder="Add New Task" onChange={handleNewTask} />

                    </form>
                </div>

                <div>
                    <p>想定される時間</p>
                    <select
                        onChange={Change}                    >
                        {deadTask}
                    </select>


                </div>
                <div>

                    <input type="date"
                        onChange={e => setDead(e.target.value)} />
                    <div>{dead}</div>
                </div>
                <div><Button clicked={handleSubmit} /></div>
            </div>
            <ul>
                <TaskWrap>
                    {todos.map((todo, index) => (
                        <div className={classes.tasklist}>
                            <Item key={getKey()}>{todo.task} </Item>
                            <Item key={getKey()}>{todo.time}</Item>
                            <Item key={getKey()}>{todo.dead}</Item>
                            {/* <li key={getKey()}>締め切りまで{todo.message}</li> */}
                            <Buttontask onClick={moveToTaskDetail}>詳細</Buttontask>
                            <input
                                className={classAdd ? classes.play : classes.none}
                                type="button"
                                onClick={() => handleRemoveTask(index)}
                                value="削除" />
                        </div>
                    ))}
                </TaskWrap>


            </ul>

        </>
    );
}





const TaskWrap = styled.div`

width: 100%;
background-color: #C0C0C0;
`
const Item = styled.div`
margin-left: 20px;
margin-top: 30px;
`
const Buttontask = styled.button`

margin-top: 30px;
margin-left: 20px;
`

export default withRouter(Taskinput)

import React from 'react'
import classes from './button.module.css'

const Button = (props) => {
    return (
        <div
            className={`${classes.icon} ${classes.iconplus}`}
            onClick={props.clicked} >
            <span className={classes.icon__mark}></span>
        </div>
    )
}

export default Button;

.todolist {
    display: flex;
    justify-content: space-between;
}

.tasklist{
    display: flex;
    justify-content: space-between;
    list-style: none;
}

.none{
    display: none;
}

.play{
    background-color: aquamarine;
}

試したこと

三項演算子でclassNameの付け替えをすればいいのではと思いましたが、クラスをつけた途端、結局出てきてしまうのでできないと思いました。しかし、そもそもこのコードではclassAddは変化していてもCSSが反映されませんでした。
cleateElementを試そうかと思ったのですが、できませんでした。

補足情報（FW/ツールのバージョンなど）

windows10

Comments

[coolwind0202]

classAddを使ってclassNameを付け替えようとしたときのソースを見たいです
三項演算子を使うのはいい判断だと思いますが、CSSが反映されないというのが気になります

[yuiei]

coolwindさん！ありがとうございます！
記事を更新しました。 className={classAdd ? classes.play : classes.none}が該当箇所です。cssはmodule.cssをimportしました。しかし、console.log(classAdd)で確認したところ、trueが入っているのですが、実際の画面上にはボタンが表示されませんでした。cssが反映されないというのはこのことについてです。

Answer 1

classAdd が生の変数になっているのが原因だと思います。
質問された部分を実際に実行して確認しましたが、 useState() で包んだことで 削除 ボタンが正常に表示されるようになりました。

let classAdd = false;

↓

const [classAdd, setClassAdd] = useState(false);

---

classAdd = true;

↓

setClassAdd(true);

---

なお、ご存知かもしれませんが参考までに、 className に三項演算子を適用するのではなく、React要素そのものを三項演算子で「条件付きレンダー」する方法もあります。

条件付きレンダー - React

<div className={classes.tasklist}>
  <Item key={getKey()}>{todo.task} </Item>
  <Item key={getKey()}>{todo.time}</Item>
  <Item key={getKey()}>{todo.dead}</Item>
  { classAdd &&
    (
      <>
        <Buttontask onClick={moveToTaskDetail}>詳細</Buttontask>
        <input className={classes.play}
               type="button"
               onClick={() => handleRemoveTask(index)}
               value="削除" />
      </>
    )
  }
</div>

Comments

[yuiei]

本当にありがとうございます！助かります。