React.js

// Clock
class Clock extends React.Component {
  state = {
    date: new Date(),    
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    )
  }

  tick() {
    this.setState({
      date: new Date(),
    })
  }

  render() {
    return (
      <div>
        <h5>Current Time: {this.state.date.toLocaleTimeString()}</h5>
      </div>
    )
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
)

//form
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(e) {
    const target = e.target.value;
    this.setState({
      value: target
    })
  }
  
  handleSubmit(e) {
    alert('Input String: ' + this.state.value);
    e.preventDefault();
  }
  
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input 
            name="input"
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
          <button>Submit</button>
        </form>
      </div>
    )
  }
}

ReactDOM.render(
  <Form />,
  document.getElementById('root')
)

//Search Bar + Search Result
const dummy = [
  {
    'name': 'Harry Potter',
    'movie': 'Harry Potter',
  },
  {
    'name': 'Cedric Digory',
    'movie': 'Harry Potter',
  },
  {
    'name': 'Katniss Everdeen',
    'movie': 'Hunger Games',
  },
  {
    'name': 'Jon Snow',
    'movie': 'Game of Thrones',
  },
]

class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(e) {
    const target = e.target.value;
    this.setState({
      input: target
    })
  }
  
  handleSubmit(e) {
    const {input} = this.state;
    e.preventDefault();
    this.props.updateSearchParam(input);
  }
  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input 
          type="text"
          value={this.state.input}
          onChange={this.handleChange}
        />
        <button>Search</button>
      </form>
    )
  }
}

class SearchResult extends React.Component {
  renderResult() {
    const results = this.props.searchResults.map(entry => {
      return (
        <li>{entry['name']}</li>
      )
    })  
    return results;
  }
  
  render() {
    return (
      <div>
        {this.renderResult()}
      </div>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchParam: '',
      searchResults: [],
    }
    this.updateSearchParam = this.updateSearchParam.bind(this);
    this.updateSearchResult = this.updateSearchResult.bind(this);
  }
  
  updateSearchResult() {
    const {searchParam} = this.state;
    const results = dummy.filter(data => data['movie'] == searchParam);
    this.setState({
      searchResults: results,
    })
  }
  
  updateSearchParam(value) {
    this.setState({
      searchParam: value,
    }, () => {
      this.updateSearchResult();
    })
  }
  
  render() {
    const {searchResults} = this.state;
    return (
      <div>
        Search
        <SearchBar updateSearchParam={this.updateSearchParam} />
        <SearchResult searchResults={searchResults}/>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

//counter
class Counter extends React.Component {
  constructor(props) {
    super(props); 
    this.state = {
      currentValue: 0,
    }
    this.onAddOneClick = this.onAddOneClick.bind(this);
    this.onAddTenClick = this.onAddTenClick.bind(this);
    this.onSubtractOneClick = this.onSubtractOneClick.bind(this);
    this.onSubtractTenClick = this.onSubtractTenClick.bind(this);
    this.onResetClick = this.onResetClick.bind(this);
  }
  
  onAddOneClick() {
    this.setState((prevState) => ({
      currentValue: prevState.currentValue + 1,
    }))
  }
  
  onAddTenClick() {
    this.setState((prevState) => ({
      currentValue: prevState.currentValue + 10,
    }))
  }
  
  onSubtractOneClick() {
    this.setState((prevState) => ({
      currentValue: prevState.currentValue - 1,
    }))
  }
  
  onSubtractTenClick() {
    this.setState((prevState) => ({
      currentValue: prevState.currentValue - 10,
    }))
  }
  
  onResetClick() {
    this.setState({
      currentValue: 0,
    })
  }
  
  render() {
    return (
      <div>
        <button onClick={this.onSubtractTenClick}>-10</button>
        <button onClick={this.onSubtractOneClick}>-1</button>
        <span> {this.state.currentValue} </span>
        <button onClick={this.onAddOneClick}>+1</button>
        <button onClick={this.onAddTenClick}>+10</button>
        <button onClick={this.onResetClick}>Reset</button>
      </div>
    )
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
)

//todo list
class InputField extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputString: '',
    }
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleInputChange(e) {
    const target = e.target.value;
    this.setState({
      inputString: target,
    })
  }
  
  handleSubmit(e) {
    const {inputString} = this.state;
    e.preventDefault();
    this.props.addTodoList(inputString);
  }
  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.inputString}
          onChange={this.handleInputChange}
        />
        <button type="submit">Enter</button>
      </form>
    )
  }
}

class TodoList extends React.Component {
  renderItems() {
    const items = this.props.todoList.map(item => {
      return (
        <li key={item}> {item} </li>
      )
    })
    return items;
  }
  
  render() {
    return (
      <div>
        {this.renderItems()}
      </div>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todoList: [],
    }
    this.addTodoList = this.addTodoList.bind(this);
  }
  
  addTodoList(todo) {
    this.setState({
      todoList: [...this.state.todoList, todo]
    })
  }
  
  render() {
    const {todoList} = this.state;
    return (
      <div>
        Todo list
        <InputField addTodoList={this.addTodoList}/>
        <TodoList todoList={todoList} />
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)Ω