Странное поведение инпутов при пагинации

Question

Почему-то при переключении на Регистрация 3-ий input "наследует" value от предыдущего состояния, то-есть по-идее у него не должно быть value, но тем не менее появляется равное Войти. Как исправить?

import React, { useState } from 'react';

function Auth() {
    const [pagination, setPagination] = useState('log');

    function pag() {
        if (pagination === 'log') {
            return (
                <>
                    <input
                        type="text"
                        className="email"
                        placeholder="E-mail"
                    />
                    <input
                        type="text"
                        className="password"
                        placeholder="Пароль"
                    />
                    <input
                        type="button"
                        className="done"
                        value="Войти"
                    />                   // Отсюда передается
                </>
            );
        }

        return (
            <>
                <input
                    type="text"
                    className="email"
                    placeholder="E-mail"
                />
                <input
                    type="text"
                    className="password"
                    placeholder="Пароль"
                />
                <input
                    type="text"
                    className="password password-repeat"
                    placeholder="Повторите пароль"
                />                                          // Сюда
                <input
                    type="button"
                    className="done"
                    value="Зарегестрироваться"
                />
            </>
        );
    }

    function changePag(ev) {
        if (ev.target.dataset.type === 'log') {
            setPagination('log');
        } else {
            setPagination('reg');
        }
    }

    return (
        <div className="auth_page">
            <div className="pagination">
                <input
                    type="button"
                    className="log"
                    data-type="log"
                    onClick={changePag}
                    value="Вход"
                />
                <input
                    type="button"
                    className="reg"
                    data-type="reg"
                    onClick={changePag}
                    value="Регистрация"
                />
            </div>
            <div className="form">
                {pag()}
            </div>
        </div>
    );
}

export default Auth;

Answer 1

Можно поставить value="", тебе все равно нужно будет хранить все value в state и менять всё это дело:

const [data, setData] = useState({
    auth: {
        login: "",
        password: ""
    }, 
    reg: {
        login: "",
        password: "",
        passwordR: ""
    }

})

Еще стоит вызывать инпуты не {pag()}, а <Pag/>. Что-то типа такого, но разумеется это прост отдаленный пример

    import React, { useEffect, useState } from 'react';

const AuthComponent = ({show, data}) => {
  const [showAuth, setShowAuth] = useState(false)
  useEffect(() => {
    setShowAuth(show)
  }, [show])
  return (
    <>
      {
      showAuth ? 
      <>
      <input
            type="text"
            className="email"
            placeholder="E-mail"
            value={data.auth.login}
        />
        <input
            type="text"
            className="password"
            placeholder="Пароль"
            value={data.auth.password}
        />
        <input
            type="button"
            className="done"
            value="Войти"
        />      
    </> : 

    <>
    <input
        type="text"
        className="email"
        placeholder="E-mail"
        value={data.reg.password}

    />
    <input
        type="text"
        className="password"
        placeholder="Пароль"
        value={data.reg.password}

    />
    <input
        type="text"
        className="password password-repeat"
        placeholder="Повторите пароль"
        value={data.reg.passwordR}

    />                                          
    <input
        type="button"
        className="done"
        value="Зарегестрироваться"
    />
</>
    }
    </> 
  )
}

function Auth() {
    const [pagination, setPagination] = useState(true);
    const [data, setData] = useState({
      auth: {
          login: "",
          password: ""
      }, 
      reg: {
          login: "",
          password: "",
          passwordR: ""
      }
  
  })
    function changePag(state) {
        setPagination(state)
    }

    return (
        <div className="auth_page">
            <div className="pagination">
                <input
                    type="button"
                    className="log"
                    data-type="log"
                    onClick={()=>changePag(false)}
                    value="Регистрация"
                />
                <input
                    type="button"
                    className="reg"
                    data-type="reg"
                    onClick={()=>changePag(true)}
                    value="Вход"
                />
            </div>
            <div className="form">
                <AuthComponent data={data} show={pagination}/>
            </div>
        </div>
    );
}

export default Auth;

извиняюсь за форматирование

БЛОГ НА HUSL

Странное поведение инпутов при пагинации

Ответы (1 шт):