ReactでのListとKey扱い

key

keyはelementに固有性を付与するため（識別、unique）に配列内部に指定しなければなりません。
また、keyは兄弟同士でuniqueすればいいです。

import React from 'react'

export default function List() {
    const todos= [
        {id: 1, text: 'Drink Water'},
        {id: 2, text: 'Wash Car'},
        {id: 3, text: 'Listen Lecture'},
        {id: 4, text: 'Go to bed'},
    ]

    const Item = (props) => {
        return <li key={props.id}>{props.text}</li>; //li elementにkeyを与えるのは宜しくない 
    }
    const todoList = todos.map((todo) => 
        <Item key={todo.id}                          //正しいkey与え方、配列の内部にkeyを指定している。
                  {...todo}/>)             

    return (
        <>{todoList}</>
    )
}

keyをpropsにて渡したい

下のコードのItem Componentにkeyをpropsとして渡しています。
果たして、keyもtextのようにpropsにて子componentに渡すことができるのか？

import React from 'react'

export default function List() {
    const todos= [
        {id: 1, text: 'Drink Water'},
        {id: 2, text: 'Wash Car'},
        {id: 3, text: 'Listen Lecture'},
        {id: 4, text: 'Go to bed'},
    ]
    
    const Item = (props) => {
        return <li>{props.key}{props.text}</li>
    }

    const todoList = todos.map((todo) => 
        <Item key={todo.id} text={todo.text}
    />)  

    return (
        <>{todoList}</>
    )
}

※出力結果(画面)

※出力結果(console)

結果を見ると、keyはpropsにて渡せないみたいです。
ひたすらreactのkeyはelementの固有性を判断するだけでpropsにて子に渡すことはできません。

todos.idを画面に出力したい場合は以下のようにidを指定してあげればいいです。

<Item key={todo.id} id={todo.id}text={todo.text} /> 

※出力結果

index

reactではkeyを指定してないと、indexをkeyとして自動付与します。 そのため、上記のconsoldeでWarningが起きても問題なく動作したのです。