Combining components

Let's see how we can use this simple CodeEditor component to build the more complex CodeListEditor component.

import React
import CodeEditor from './code-editor'

export default function CodeListEditor() {
  return (
    <div>
      {/* 
        We won't implement the edition of the code list Label.
        Notice that comments look different from HTML in JSX.
      */}
      <button>Add a code</button>
      <div>
        <CodeEditor />
        <CodeEditor />
        <CodeEditor />
      </div>
    </div>
  )
}

Until now, each CodeEditor looks exactly the same, with "unhappy" as a label. In the next section, we will see how to give some parameters to a component.

Play with this pen.