JSX記法でのエラーでつまづいてます

Question

最近Reactを学習中で、簡単なチュートリアルをJSX記法で勉強しています。
”いいね”ボタンを押したらカウントアップしていくようなボタンをつくりたいのですが、
関数内にエラーがでてしまいます。
「”，”が必要です。」とエディター上でエラー表示されて、ローカル環境のページでは「 Parsing error: The type cast expression is expected to be wrapped with parenthesis」とエラーがでます。

class Blog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isPublished: false,
            count: 0
        }
    }

    componentDidMount() {
        document.getElementById( elementId: 'counter').addEventListener( type: 'click',this.countUp)
    }

    componentDidUpdate(){
        if(this.state.count >= 10) {
            this.setState( state: {count: 0})
        }
    }

    componentWillUnmount(){
        document.getElementById(elementId:'counter').removeEventListener(type:'click',this.countUp)
    }

    togglePublished =() => {
        this.setState( state: {
            isPublished: !this.state.isPublished,
            order:1,
        })
    }

    render() {
        return (
            <>
                <Article
                 title={"Reactの使い方"}
                 order={1}
                 isPublished={this.state.isPublished}
                 toggle={() => this.togglePublished()}
                 count={this.state.count}
                />
            </>
        )
    }
}

１０行目の[elementID: 'counter']の[:]
１１行目の[type: 'click',]の[:]
19行目の[elementId:'counter']の[:]
20行目の[type:'click']の[:]
に赤い波線のエラーが表示されます。

技術系のブログを読みあさってもわからなかったので、ここで質問させていただきました。

どなたかご教示お願いいたします！

Answer 1

JavaScriptの引数に、document.getElementById( elementId: 'counter')のような書き方はありません。document.getElementById('counter')と渡したい値だけにしてください（他の箇所も同じです）。

Comments

[maisumakun]

逆に何を見たらこんな書き方になったのかが気になります。

[Kodai_Takada]

教えていただいた通りに「elementID:」を消したらエラーがなくなりました。ありがとうございます！
一つエラーが解けたら、次は他のところのエラーがでてきたので、「とほほ，，，」となりながら原因究明しています！
とりあえず、一つ目の解決ができたので嬉しいです。

youtubeの「トラハックのエンジニア学習ゼミ」でReactの環境構築までできたので、そのまま実践をしているところでした。
「日本一わかりやすいReact入門＃６」で実践課題を動画に倣ってやっていたら、エラーがでてしまって、ネット検索しても解決できませんでした。
ただ、Youtube動画ではエラーが出ずにできていたのですが、なぜなのでしょう、、？

[hoshi-takanori]

横から失礼します。その動画では、JetBrains 社の IDE を使っているように見えますが、引数の前に引数名を勝手に表示する機能があるのです。(よく見ると微妙にフォントが違いますよね。)
https://pleiades.io/help/resharper/Argument_Style.html

ちなみに、React コンポーネントで document.getElementById を使うのはどうかと思います…。

[maisumakun]

> ちなみに、React コンポーネントで document.getElementById を使うのはどうかと思います…。

外部エレメントから動かしたい場合は、このような処理も仕方ないとは思います。

[Kodai_Takada]

hoshi-takanoriさん、maisumakunさん、ありがとうございます。

・IDEの『WebStorm』のウェブページをみました。エディターでコードが変わることがあるのですね。
　いままで、youtube動画やネットにある教材の丸々コピペしていました。
　基礎知識をつけて、自分でアレンジできるようにがんばります。
・VirtualDOMが使えるReactでは、通常のDOM操作の『document.getElementById』を使う必要がないのですね！勉強を進めて少しずつわかりました！

Reactの環境構築したばかりで、基礎知識がありませんでしたが、
学習をすすめるきっかけをご教示いただきましてありがとうございました！