Reactにてクリックした要素の、親li要素だけにクラスを付与したいです。

Question

実現したいこと

i要素をクリックしたら、親要素だけにクラスis-activeを付与したいです。

<li class="list-item l-flex">
<i>クリックする要素</i>
<p>text<p>
<button>略</button>
</li>
<li class="list-item l-flex">
<i>クリックする要素</i>
<p>text<p>
<button>略</button>
</li>
<li class="list-item l-flex">
<i>クリックする要素</i>
<p>text<p>
<button>略</button>
</li>

    render() {
        return(
            <>
                <div className="l-flex form">
                    <Form onChangeFunction={this.changeValue} value={this.state.value} />
                    <Btn text="ADD!" onClickFunction={this.addTodo} />
                </div>
                <TodoList todos={this.state.todos} onClickFunction={this.removeTodo} />
            </>
        );
    }

const TodoList = (props) => {
    return(
        <ul className="list l-flex">
            {props.todos.map((todo, index) =>
                <li key={index} className="list-item l-flex">
                    <i className="far fa-square list-icon"></i>
                    <p>{todo}</p>
                    <Btn text="remove!" onClickFunction={() => props.onClickFunction(index)} />
                </li>
            )}
        </ul>
    );
}

発生した問題点

参考にしたサイト

• 回答の三項演算子を試してみると、trueかfalseの値で上書きしてしまいます。
• 全てのli要素にクラスを付与することになってしまいます。

Answer 1

こんにちは

i要素をクリックしたら、親要素だけにクラスis-activeを付与したいです。

ということであれば、以下のようにすればよいかと思います。

1. ひとつの<li>単位で、コンポーネントにする。（例えば Item とします）
2. Item は、boolean のstateプロパティ activeを持つようにする。
3. アイコンがクリックされたら activeを反転させる。
4. activeの値によって、 <li>のclassName を適宜、制御する。

以下は、上記の考えで作ったサンプルです。

• codesandbox: アイコンのクリックで親要素のクラスを切り替えるサンプル

fa-squareアイコンをクリックすると、クリックされたアイコンの親要素の li のクラスが is_active となり、

• <li> の background が 薄いピンク色になり、
• アイコンが fa-check-square になり、
• <p>の文字が太字の赤になります。

また、上記のサンプルでは 4. のclassNameの制御の際に便利なモジュール

• classnames

を使っています。
以上、参考になれば幸いです。

Comments

[退会済みユーザー]

```
<li key={index} className="list-item l-flex">
<i className="far fa-square list-icon"></i>
<p>{todo}</p>
<Btn text="remove!" onClickFunction={() => props.onClickFunction(index)} />
</li>
```
の部分をコンポーネント化して、
```
{props.todos.map((todo, index) =>
<Item />
)}
```
にする。ということでしょうか？

[jun68ykt]

はい。そのとおりです。
回答に挙げたサンプルのItem は useStateフックを使っていますが、クラスコンポーネントで書いて、 this.state = { active: boolean };
をコンストラクタに書いて、アイコンクリック時に、
this.setState({ active: !this.state.active );　
とするのでもできます。

[退会済みユーザー]

個別にactiveを設定できるようになりました。ありがとうございます。
しかし、三項演算子の使い方が分かりません。
```
className={"list-item l-flex" + this.state.active ? " is-active" : ""}
```
このようにして見たのですが、list-itemとl-flexを上書きして、is-activeクラスだけになってしまいます。javascriptについてになってしまいましたが、よろしくお願いします。

[jun68ykt]

"list-item l-flex" + this.state.active ? " is-active" : ""
だと、"list-item l-flex" + this.state.active という加算が先に行われて、これは文字列の
"list-item l-flextrue"
または
"list-item l-flexfalse"
というものになり、これらがbooleanとして評価されると、長さ１以上の文字列はtrueなので、全体として
: の前の "is-active"という文字列になります。
なので意図している三項演算子のほうをカッコでくくって

"list-item l-flex" + (this.state.active ? " is-active" : "")

とするとよいでしょう。

[jun68ykt]

２つ前のコメントで

this.state = { active: boolean };

と書いてしまっていましたが、すでにお気づきとは思いますが、これは間違いで

this.state = { active: false };

が正しいです。

[退会済みユーザー]

出来ました!!!本当にありがとうございます！
左から評価される、という奴でしょうか。盲点でした。ありがとうございます！

[jun68ykt]

どういたしまして。
> 出来ました!!!
とのことでよかったです????

ちなみに、カッコがないと、三項（条件）演算子よりも＋による加算のほうが先に行われることは、

演算子の優先順位

の問題です。以下のページ

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

にある表で、三項（条件）演算子は、優先順位４です。対して +(加算）は 13 なので、カッコなしで書くと、加算のほうが先に行われる、ということでした。