import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <>
      <h1>リスト</h1>
      {/* 問題1. childrenを渡そう */}
      <UnorderedList>
        <li>Hello World</li>
      </UnorderedList>
    </>
  )
}

// 問題2. 分割代入でchildrenを受け取ろう
const UnorderedList = ({ children }) => {
  return (
    //  問題3 childrenを表示しよう
    <ul>{children}</ul>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

props.children

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <>
      <h1>リスト</h1>
      {/* 問題1. childrenを渡そう */}
      <UnorderedList></UnorderedList>
    </>
  )
}

// 問題2. 分割代入でchildrenを受け取ろう
const UnorderedList = () => {
  return (
    //  問題3 childrenを表示しよう
    <ul></ul>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


componentとprops（children）

まずは必要なスキルを確認しましょう！