How to redirect based on radio value on React?-CodePudding

i have been trying to redirect (using navigate from "react-router-dom") from the Login screen based on the radio button the user clicks, i've tried using states but i don't know if that's the way to go or if there's an easier way to do what i want to do. I've checked some other questions here but i don't know if that's what i should do either

Here's what i've written so far (pretty much the entire Component):

import { TextInput, Text, View } from "react-native";
import { styles } from '../../App';
import logo from "../../logo.svg";
import Button from 'react-bootstrap/Button';
import { Route, useNavigate } from "react-router-dom";
import {useState} from 'react';

export default function LoginForm() {
  const navigate= useNavigate();
  const [opcion, setOpcion] = useState();
  return (
    <View>
      <form name="LoginForm" method="GET" action="#" onSubmit={()=> navigate(opcion=="Preceptor"? "/AdministrarCurso_Preceptor": "/AdministrarCurso_Portero")}>
        <label htmlFor="usuario">Nombre de Usuario</label> <br/>
        <input required type="text" name="usuario" defaultValue="" /> <br/>
        {/* <label htmlFor="correo">Correo Electronico</label> <br/>
        <input required type="text" name="correo" defaultValue="" /> <br/> */}
        <label htmlFor="contraseña">Contraseña</label> <br/>
        <input required type="password" name="contraseña" defaultValue="" /> <br/> <br/>
        <><input type="checkbox" />
        Mantener la sesión iniciada</><br/>
        <><input type="radio" name="profesion" required onChange={(e)=> setOpcion(e.target.value)} />
        Portero</><br/>
        <><input type="radio" name="profesion" required onChange={(e)=> setOpcion(e.target.value)}/>
        Preceptor</><br/>
        <input type="submit" value="Ingresar" />
        {/* <Button onClick={()=> navigate('/RegisterForm')}>¿No estás registrado?</Button> */}
        </form>
    </View>
  );
}

PS: i've already solved my other question from before, i just don't know how to mark it as answered

CodePudding user response：

You should add which value="" are you getting:

<input type="radio" name="profesion" required value="Portero" onChange={(e)=> setOpcion(e.target.value)} /> Portero

<input type="radio" name="profesion" required value="Preceptor" onChange={(e)=> setOpcion(e.target.value)} /> Preceptor

and also change this part of the code opcion == "Preceptor" to this opcion === "Preceptor" use strict equality