HomeWork/react2/my-app/src/App.js

import './App.scss';
import React, { useState } from 'react';

const Spoiler = ({header="+", open, children}) => {
let [touch, setTouch]=useState(open);

const onClick = () => {
  setTouch(!touch);
}

  return (
    <div onClick={onClick}>
      { header }
     
      { touch? children : null }
      
    </div>
  )
}

class RangeInput extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      min: this.props.min,
      max: this.props.max,
    }
  } 


  changeColor = (e) => {
    const lengthStr = e.target.value.length;
    this.setState( () => ({ value: lengthStr}));
  }
  
  render() {
    return <input type="text" onChange = {this.changeColor} 
              style={{background: this.state.max < this.state.value || this.state.value < this.state.min ? 'red':'white'}}>

            </input>
  }
}

class PasswordConfirm extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      min: this.props.min,
      
    }
  } 


  changeLogin = (e) => {
    const lengthStr = e.target.value.length;
    this.setState( () => ({ 
                            lengthLogin: lengthStr,
                            login: e.target.value,
                          }));  
   
  }  

  changePassword = (e) => {
    const lengthStr = e.target.value.length;
    this.setState( () => ({
                           lengthPassword: lengthStr,
                           password: e.target.value}));
   
  }

  
  render() {
    return (
      <div className="password" style={{background: this.state.login === this.state.password 
                                          && this.state.lengthLogin > this.state.min
                                          && this.state.lengthPassword > this.state.min? 'green':'white'}}>

        <input type="password" onChange = {this.changeLogin} 
                  style={{background: this.state.lengthLogin < this.state.min ? 'red':'white'}}>

                </input>
        <input type="password" onChange = {this.changePassword} 
          style={{background: this.state.lengthPassword < this.state.min ? 'red':'white'}}>

        </input> 
      </div>       

    )
  }
}

function App() {
  return (
    <div>
      <div className="App">
        <Spoiler header={<h1>Заголовок</h1>} open>
           Контент 1
          <p>
            лорем ипсум траливали и тп.
          </p>
       </Spoiler>
      </div>
      <RangeInput min={2} max={10} />
      <PasswordConfirm min={2} />
      
    </div>
    
  );
}

export default App;