content: import React from 'react';
  
  import Fixture from '../../Fixture';
  
  
  
  class InputPlaceholderFixture extends React.Component {
    constructor(props, context) {
      super(props, context);
  
      this.state = {
        placeholder: 'A placeholder',
        changeCount: 0,
      };
    }
  
    handleChange = () => {
      this.setState(({ changeCount }) => {
        return {
          changeCount: changeCount + 1
        }
      })
    }
    handleGeneratePlaceholder = () => {
      this.setState({
        placeholder: `A placeholder: ${Math.random() * 100}`
      })
    }
  
    handleReset = () => {
      this.setState({
        changeCount: 0,
      })
    }
  
    render() {
      const { placeholder, changeCount } = this.state;
      const color = changeCount === 0 ? 'green' : 'red';
  
      return (
        <Fixture>
          <input
            type='text'
            placeholder={placeholder}
            onChange={this.handleChange}
          />
          {' '}
          <button onClick={this.handleGeneratePlaceholder}>
            Change placeholder
          </button>
  
          <p style={{ color }}>
            <code>onChange</code>{' calls: '}<strong>{changeCount}</strong>
          </p>
          <button onClick={this.handleReset}>Reset count</button>
        </Fixture>
      )
    }
  }
  
  export default InputPlaceholderFixture;
  