React

by AlexKhrapal

HTML

<div id="app"></div>

CSS

body {
  padding: 15px;
}

.line-through {
  text-decoration: line-through;
}

React

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	isToggle: false,
      value: '',
      filter: '',
      select: 'kyiv',
      isSelected: false,
      list: [
      	{
        	id: 1,
          name: 'Alex',
          city: 'LA'
        },
        {
        	id: 2,
          name: 'Greg',
          city: 'London'
        },
        {
        	id: 3,
          name: 'Marry',
          city: 'Milan'
        },
        {
        	id: 4,
          name: 'Alizabet',
          city: 'NY'
        },
      ]
    } 
    this.handleClick = this.handleClick.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }
  
  handleClick() {
  	this.setState(prevState => ({
    	isToggle: !prevState.isToggle
    }))
  }
  
  handleChange() {
  	const target = event.target
    const value = target.type === 'checkbox' ? target.checked : target.value
    const name = target.name
    
    this.setState({
    	[name]: value
    })
  }
  
  render() {  
    const filteredList = this.state.list.filter(
    	(item) => {
      	return item.name.toLowerCase().indexOf(this.state.filter.toLowerCase()) !== -1;
      }
    )
    
    const sortedList = filteredList.sort(
    	(a, b) => {
     		if(a.name < b.name) { return -1; }
        if(a.name > b.name) { return 1; }
        return 0;
      }
    )
    
    return (
      <div>
        <button onClick={this.handleClick}>{this.state.isToggle ? 'Off' : 'On'}</button>
        <p>Сейчас {this.state.isToggle ? 'выключен' : 'включен'}</p>
        
        <br/>
        <hr/>
        <br/>
        
        <input 
          type="text" placeholder="Placeholder text..."
          value={this.state.value}
          name='value'
          onChange={this.handleChange}
        />
        <p>{this.state.value}</p>
        
        <br/>
        <hr/>
        <br/>
        
        <label className={this.state.isSelected ? 'line-through' : ''} style={{userSelect: 'none'}}>
          <input 
 ...