- 12 hours
- Medium
Free online content available in this course.
course.header.alt.is_video
course.header.alt.is_certifying
Got it!Last updated on 3/3/22
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 getisConnected
inChildComponent
and use it in therender()
?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!)
Careful, there are several correct answers.class MyComponent extends Component { displayAlert() { alert(`The alert has been triggered`) } render() { return ( <div> <button onClick={() => displayAlert()}>👉 Click here 👈</button> </div> ) } }
class MyComponent extends Component { render() { return ( <div> <button onClick={() => this.alert(`The alert has been triggered`)}> 👉 Click here 👈 </button> </div> ) } }
class MyComponent extends Component { displayAlert() { alert(`The alert has been triggered`) } render() { return ( <div> <button onClick={this.displayAlert}>👉 Click here 👈</button> </div> ) } }
class MyComponent extends Component { displayAlert() { alert(`The alert has been triggered`) } render() { return ( <div> <button onClick={() => this.displayAlert()}>👉 Click here 👈</button> </div> ) } }
- Up to 100% of your training program funded
- Flexible start date
- Career-focused projects
- Individual mentoring