Task app with class that changes with state

Task.js

import React, { useState } from 'react'
import './Task.css';

function Task(props) {

    const [task, setTask] = useState(props.content)
    const [taskComplete, setTaskComplete] = useState(true)

    let taskCompleteClassName = 'Task-status'
    if(taskComplete) {
        taskCompleteClassName = 'Task-status__complete'
    }


    function handleSubmitForm(event) {
        event.preventDefault()
        setTask(event.target[0].value)
    }

    function toggleTask() {
        setTaskComplete(!taskComplete)
    }

    return (
        <section className="Task">
            {!task && (
                <form onSubmit={handleSubmitForm}>
                    <label htmlFor="taskname">Task:</label>
                    <input type="text" name="taskname" />
                </form>
            )
           }
            {task && (
                <div onClick={ toggleTask } className={taskCompleteClassName}>
                    <p>Your task:</p>
                    <p>{ task }</p>
                </div>
            )}
        </section>
    )
}

export default Task