check-react-state.md

Checking for understanding

Use the demo app built in the class and create a new component ExampleComponent. Use the following code as the starter code in the ExampleComponent:

import React from 'react';

class ExampleToggle extends React.Component {
  state = {
    didClick: true
  };

  handleClick = () => {
    console.log('clicking');
  };
  render() {
    return (
      <div>
        {/* we will cover conditionals soon, so don't worry if you don't understand the following line */}
        {this.state.didClick ? <h2>Did I click?</h2> : <h2>Yes you did!</h2>}

        <button>Click here!</button>
      </div>
    );
  }
}

export default ExampleToggle;

• Make sure you import this component in the App.js and render it to the DOM.

Iteration 1:

Add the onClick handler to the button so when button is clicked, the clicking text is outputted in the browser's console.

Iteration 2:

Have the handleClick() method toggle the text (Did I click? <--> Yes you did) on every click. Practice the setState() method.

Happy coding!