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

// RangeInput
const RangeInput = ({ min, max }) => {
    const [text, setText] = useState('')

    let color

    (text.length < min || text.length > max) && (color = { backgroundColor: 'red' })

    return (
        <div>
            <h2>RangeInput</h2>
            <input value={text} style={color} onChange={e => setText(e.target.value)} />
        </div>
    )
}

function App() {
    return (
        <div className="App">
            <header>
                {/* RangeInput */}
                <RangeInput min={2} max={10} />
            </header>
        </div>
    );
}

export default App;