Progress Within the React Ecosystem

Evaluated skills

Progress within the React ecosystem

Question 1

If we want to create a MyComponent class component, which syntaxes are valid?

Careful, there are several correct answers.

React.createClass({
 displayName: "MyComponent",
 render() {
   return (
     <div>
       <h1>{this.props.title}</h1>
     </div>
   )
 }
})

class MyComponent extends React.Component {
   return (<div>
     <h1>My component</h1>
     <p>This is my component text content ✨</p>
   </div>)
}

const MyComponent = () => (
 <div>
   <h1>My component</h1>
   <p>This is my component text content ✨</p>
 </div>
)

class MyComponent extends React.Component {
 render() {
   return (<div>
     <h1>My component</h1>
     <p>This is my component text content ✨</p>
   </div>)
 }
}

Question 2
You have a parent component, MyParentComponent , that uses a child component, <ChildComponent /> .

You want to pass an isConnected boolean from a parent component to a child component to get the following:
```
function myParentComponent() {
  return (
    <div>
      <ChildComponent isConnected={isConnected} />
    </div>
  )
}
```
<ChildComponent /> is defined as a class component. How can you get isConnected in ChildComponent and use it in the render() ?
- By getting it as a parameter of the constructor.
- With this.props .
- With this.state .
- You can’t.

Question 3

We want to create a component that displays a button which, when clicked on, triggers an alert. Which code snippet(s) will work here? (Test them out if you need to!)