Reactにて、li要素をコンポーネント化したらkeyがuniqueではなくなってしまいました。

Question

実現したいこと

以下のエラーを解消したいです。
Warning: Each child in a list should have a unique "key" prop.

Check the render method of TodoList. See https://fb.me/react-warning-keys for more information.
in List (created by TodoList)
in TodoList (created by Todo)
in Todo (created by App)
in App

変更したソースコードです。

const TodoList = (props) => {
    return(
        <ul className="list l-flex">
            {props.todos.map((todo, index) =>
                <List onClickFunction={props.onClickFunction} index={index} todo={todo} />
            )}
        </ul>
    );
}

    render() {
        return(
            <li key={this.props.index} className={"list-item l-flex" + (this.state.active ? " is-active" : "")} >
                <i onClick={this.changeActive} className={"far list-icon" + (this.state.active ? " fa-check-square" : " fa-square")}></i>
                <p>{this.props.todo}</p>
                <Btn text="remove!" onClickFunction={() => this.props.onClickFunction(this.props.index)} />
            </li>
        );
    }

今まではListコンポーネントを呼び出している箇所にli要素などを記述していました。その時はエラーが発生していません。

Answer 1

<List>自体にkeyを振ってください。

Comments

[退会済みユーザー]

index={index}をkey={index}にしたらエラーが発生しなくなりました。ありがとうございます!!
ただListコンポーネントのthis.props.indexの値が変になってしまいました。Btnコンポーネントに渡した関数はlistの削除を行うのですが全く異なるものを削除してしまいます。
console.logで確認してみると、Todoリストを追加する度に全てのthis.props.indexが呼ばれていました。どうしたらよいのでしょうか？

[退会済みユーザー]

よく考えたら違う質問になってしまいましたので、質問し直します。
ありがとうございました。

[maisumakun]

> index={index}をkey={index}にしたらエラーが発生しなくなりました。

index={index} key={index}とすればいいかと思います。

[退会済みユーザー]

ありがとうございます。以下のようにして見ました。

<List onClickFunction={props.onClickFunction} key={index} todo={todo} index={index} />

Answer 2

公式マニュアル
key が意味を持つのは、それをとり囲んでいる配列の側の文脈です。
基本ルールとしては、map() 呼び出しの中に現れる要素に key が必要です。

Comments

[退会済みユーザー]

key は React へのヒントとして使われますが、あなたが書くコンポーネントには渡されません。同じ値をコンポーネントの中でも必要としている場合は、別の名前の prop として明示的に渡してください：