• 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 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!)

    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>
          )
        }
      }
      
Ever considered an OpenClassrooms diploma?
  • Up to 100% of your training program funded
  • Flexible start date
  • Career-focused projects
  • Individual mentoring
Find the training program and funding option that suits you best