[INTERVIEW] Coding challenge to test React, functional programming, context, class keyword

cc_recursive_component.js

// Remember to overwite the code in CodeShare, JSFiddle, etc. to restore the inital state of the test and to avoid
// showing to candidates the changes made during other interwies

// TASKS:
// 1. Ask to developer to analyze the above React component:
//    - The dev should be able read, understand and explain the component
//    - The dev should be able to explain why it's necessary to .bind the method .addItem (and what other option we have: arrow function)
//    - The dev should be able to understand that it's a functional component
//    - The dev should be able to describe the behaviour of the component without rendering it

class ListItem extends React.Component {
  
  constructor() {
  	super();
    
    this.state = {
      clicked: false
    };
    
    this.addItem = this.addItem.bind(this);
  }
  
  addItem() {
    this.setState({
      clicked: true
    });
  }
  
  render() {
    const { clicked } = this.state;
    
    return (
      <div>
        <p>I'm an item</p>
        {(() => clicked
          ? <ListItem />
          : <input type="button" value="New Item" onClick={this.addItem} />
        )()}
      </div>
    );
  }
}

ReactDOM.render(
  <ListItem />,
  document.getElementById('list')
);

Links

CodeShare - JSFiddle