HW/HW_REACT/react002/src/App.js

import React, {useState, useEffect} from 'react';
import logo from './logo.svg';
import './App.css';



 const Spoiler = ({header = '+', open, children}) => {
    const [display, setDisplay] = useState(open)

    return (
        <div>
            <div onClick={() => setDisplay(!display)}>
                {header}
            </div>
            <div>
                {display ? children : null}
            </div>    
        </div>
    ) 
}; 

const RangeInput = ({min, max}) => {
    const [inputNumber, setInputNumber] = useState('')
    return (
        <div>
            <input type = 'text' style ={{ background: inputNumber.length < min || inputNumber.length > max ? 'red' : null  }}
            onChange={(e) => setInputNumber(e.target.value)}
            />
        </div>
    )
}


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

                <Spoiler>
                    <h2>Контент 2</h2>
                    <p>
                    лорем ипсум траливали и тп.лорем ипсум траливали и тп.лорем ипсум траливали и тп.лорем ипсум траливали и тп.лорем ипсум траливали и тп.
                    </p>
                </Spoiler>
                <RangeInput min={2} max={10} />
                {/* <RangeInputParent></RangeInputParent> */}
            </div>
        
    );
}
export default App;