music-player/src/pages/header/registration.js

import {useState} from "react";
import {history} from "../../App";
import {connect} from "react-redux";
import {actionFullReg} from "../../actions";

const RegForm = ({ onReg }) => {
    const [l, setL] = useState("");
    const [p, setP] = useState("");
    const [p2, setP2] = useState('')

    return (
        <div className='LoginButtons'>

            <div className='RegColumn'>
                <input placeholder='Введите имя'
                       style={{ backgroundColor: "skyblue" }}
                       onChange={(e) => setL(e.target.value)}></input>

                <input placeholder='Введите пароль'
                       style={{ backgroundColor: "skyblue" }}
                       onChange={(e) => setP(e.target.value)}></input>
                <div>{p.length < 6 ? 'Короткий пароль' : 'Хороший пароль'}</div>
            </div>
            <div className='RegColumn'>
                <button disabled={p.length >= 6 && p === p2 && l !== "" ? false : true} onClick={() => {onReg(l, p); history.push('/')}}>Регистрация</button>
                <input placeholder='Подтвердите пароль'
                       style={{ backgroundColor: "skyblue" }}
                       onChange={(e) => setP2(e.target.value)}></input>
                <div>{p === p2 ? 'Пароли совпадают' : 'Пароли не совпадают'}</div>
            </div>
        </div>
    );
};

export const CRegForm = connect(null,{onReg: actionFullReg}) (RegForm)