From 5c6b5da11bda84a70811310173b703002c329806 Mon Sep 17 00:00:00 2001 From: James Hunter Date: Thu, 20 Dec 2018 19:32:05 -0500 Subject: [PATCH] added full solution (#33545) --- .../index.md | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/guide/english/certifications/front-end-libraries/react/render-a-class-component-to-the-dom/index.md b/guide/english/certifications/front-end-libraries/react/render-a-class-component-to-the-dom/index.md index 9956560b86..227d9ec11f 100644 --- a/guide/english/certifications/front-end-libraries/react/render-a-class-component-to-the-dom/index.md +++ b/guide/english/certifications/front-end-libraries/react/render-a-class-component-to-the-dom/index.md @@ -1,7 +1,7 @@ --- title: Render a Class Component to the DOM --- -## Render a Class Component to the DOM +# Render a Class Component to the DOM Your code should end up looking similar to this: @@ -24,7 +24,32 @@ ReactDOM.render(,'node-id') ``` The ReactDOM.render syntax may be a little tricky, you need to use the triangle brackets when passing in a Class Component. Also the two subcomponents are declared behind the scenes, which may be confusing if you are used to all the variables being defined in the code editor and visible in front of you. -### Hint +## Hint - use document.getElementById('id') to get target node -### Relevant Link +## Relevant Link - [Rendering Elements](https://reactjs.org/docs/rendering-elements.html) + +## Solution +If you're still having trouble, here's the full solution. Note how you're using concepts learned in previous challenges to render a class component with children components to the DOM using the ReactDOM method `render()` and the Document method `getElementbyId('element-id')`. +```jsx + +class TypesOfFood extends React.Component { + constructor(props) { + super(props); + } + render() { + return ( +
+

Types of Food:

+ {/* change code below this line */} + + + {/* change code above this line */} +
+ ); + } +}; + +// change code below this line +ReactDOM.render(, document.getElementById('challenge-node')) +```