概要

Reactでkey={hogehoge}としてコンポーネントに値を渡すとundefinedとなってハマったので、原因と解決策をまとめました。

問題

コード

key="test"として、Column.jsに値を渡します。

App.js

import React from 'react';
import Column from './Column';

const App = () => {
  return (
    <Column key="test"/>
  );
}

export default App;

keyの値を表示してみます。
期待する値は"test"です。

Column.js

import React from 'react';

const Column = props => {
  console.log(`key = ${props.key}`);
  return (
    <></>
  );
}

export default Column;

結果

以下のように、undefinedとなります。

key = undefined

解決策

keyではなく別の名前でColumn.jsに値を渡す必要があります。
Reactの公式ドキュメントにも以下記載がありました。

Most props on a JSX element are passed on to the component, however, there are two special props (ref and key) which are used by React, and are thus not forwarded to the component.

要は、keyとrefはReact内で使われる特別な値でコンポーネントに値は渡されないということのようです。

コード

以下のようにmyKeyとしてコンポーネントに値を渡してみます。

App.js

import React from 'react';
import Column from './Column';

const App = () => {
  return (
    <Column myKey="test"/>
  );
}

export default App;

Column.jsではprops.myKeyとして値を表示します。

Column.js

import React from 'react';

const Column = props => {
  console.log(`myKey = ${props.myKey}`);
  return (
    <></>
  );
}

export default Column;

結果

以下のように値の受け渡しができました。

myKey = test

参考