Как сделать поле ввода повторно используемым и обслуживаемым

Question

В настоящее время у меня есть одно поле ввода, это похоже на то, как оно сейчас у Instagram. Поле ввода, которое используется для нового комментария и ответа на комментарий. Как я могу сделать это многоразовым, чтобы я мог повторно использовать PostComment . Поэтому, если вы нажмете кнопку ответа, она должна появиться в том же поле ввода. Что происходит сейчас, так это то, что он открывает полностью новое поле ввода, но это не DRY, и он показывает два поля ввода одновременно, что не является хорошим UX. Поэтому я хочу сделать его многоразовым.

Как создать этот сценарий:

Добавьте комментарий, затем go, чтобы добавить комментарий, и нажмите на ответ.

Рабочий фрагмент

const getImages = images.imageData.map((image, index) => {
        return (
            <InfiniteScroll
                throttle={100}
                threshold={100}
            >
            <div key={index} >

            <PostComment id={image.id}/> // comment input
            <PostComment id={image.id}/> // reply input

            </InfiniteScroll>
        )

    });

    return (
        <div>
            { getImages }
        </div>
    )
}

const PostComment = ({ id, commentPhoto }) => {
    const [commentValue, setCommentValue] = useState('');
    const [idValue, setIdValue] = useState('');

    const handleCommentChange = (id, event) => {
        event.preventDefault();
        setIdValue(id);
        setCommentValue(event.target.value)
    }

    const handleCommentSubmit = () => {
        commentPhoto(idValue, commentValue);
        setCommentValue('');
        setIdValue('');
    }

    const handleReplyCommentChange = (id, event) => {
        event.preventDefault();
        setIdValue(id);
        setReplyCommentValue(event.target.value)
    }

    const handleReplyCommentSubmit = () => {
        replyCommentPhoto(idValue, commentValue);
        setReplyCommentValue('');
        setIdValue('');
    }

    return (
        <div>
            <input type="text" value={commentValue} onChange={(event) => handleCommentChange(id, event)}/>
            <button type="submit" onClick={handleSubmit}>Post</button>
        </div>
    )
}