TypeScript/React ReactNode型のオブジェクトをfor inで見れない

Question

前提

TypeScript初心者です。
Reactはちょっとだけ経験アリ

JSXに文字列をネストさせてコンポーネントに渡す処理を作りました。

import TextDialog from './components/textdialog';

function App() {
  return (
    <div className="App">
      <TextDialog> // ここでネストさせて渡す
          Hello World!<br/>
          I am Web Developer.
      </TextDialog>
    </div>
  );
}

export default App;

コンポーネント側

export default function TextDialog({ children }: { children: React.ReactNode }) : JSX.Element {    

    console.log(children); // ネストさせたテキストがオブジェクトで表示される

    return (
        <div className="text-dialog">
            {children}
        </div>
    )
}

実現したいこと

• TextDialog.tsxのchildrenの中身をfor inで取得したい

発生している問題

export default function TextDialog({ children }: { children: React.ReactNode }) : JSX.Element {    

    console.log(children);
    console.log(typeof children);
    
    // ここでエラー
    for (const key in children) {
        if (Object.prototype.hasOwnProperty.call(children, key)) {
            const element = children[key];
            
        }
    }

    return (
        <div className="text-dialog">
            {children}
        </div>
    )
}

該当のソースコード

 // ここでエラー
    for (const key in children) {
        if (Object.prototype.hasOwnProperty.call(children, key)) {
            const element = children[key];
            
        }
    }

試したこと

• childrenを{}で囲ってみたり

補足情報（FW/ツールのバージョンなど）

• React(18.2.0)
• TypeScript(4.7.0)

Comments

[hoshi-takanori]

children は配列のような何かだったような…。
https://reactjs.org/docs/react-api.html#reactchildren

Answer 1

childrenの中身を操作するには、React.Childrenの関数群を使ってください（React公式）。

Comments

[maisumakun]

> childrenの中身をfor inで取得したい

for-inは不適当です。React.Children.forEachで回す、あるいはReact.Children.toArrayで配列にしてから好きに操作する、などしてください。

[dimyas]

ありがとうございます！
試してみます！

Answer 2

解決したコード

    // 配列にする
    const childArray = React.Children.toArray(children)

    for (const key in childArray) {
         if (Object.prototype.hasOwnProperty.call(childArray, key)) {
             console.log(childArray[key]);
         }
    }