import React, { useState } from "react"; import './NewTask.css'; import TaskDetails from "./TaskDetails"; import TaskSetting from "./TaskSetting"; const NewTask = () => { const [checked, setChecked] = useState("inPerson"); return ( <div className="newtask-div"> <h3 className="header">New Task</h3> <ul className="task-item"> <li style={{ fontSize: "17px" }}>Select Task Type: </li> <li> <input type="radio" checked={checked === "inPerson"} name="inPerson" value="inPerson" onChange={(e) => { setChecked(e.target.value) console.log("show task details") }} /> <lable>In Person</lable> </li> <li> <input type="radio" checked={checked === "online"} name="online" value="online" onChange={(e) => { setChecked(e.target.value) console.log("dont show task detail") }} /> <lable>Online</lable> </li> </ul> <TaskDetails /> </div> ) } export default NewTaskEstoy tratando de usar el botón de opción para renderizar condicionalmente el Componente. Ej: al hacer clic en "en persona", se mostrará el componente "TaskDetail" y se mostrarán otros componentes cuando se use "en línea". ¿Hay algún método para lograr esto?
Puede representar componentes condicionalmente en función del valor seleccionado, como se muestra a continuación:
... { checked === "inPerson" && <InpersonComponents /> } { checked === "online" && <OnlineComponents /> } ...Recomiendo este método con renderizado condicional.
{checked === "inPerson" ? <TaskDetails /> : <SomeOtherComponent />o
{checked === "inPerson" && <TaskDetails />} {checked === "online" && <SomeOtherComponent />}el nombre de las entradas debe ser el mismo si desea seleccionar cualquiera de ellas
const NewTask = () => { const [inPerson, setInPerson] = useState(true); const [online, setOnline] = useState(false); return ( <div className="newtask-div"> <h3 className="header">New Task</h3> <ul className="task-item"> <li style={{ fontSize: "17px" }}>Select Task Type: </li> <li> <input type="radio" checked={online} name="singlegroup" value="inPerson" onChange={(e) => { setInPerson(e.target.value) setOnline(!e.target.value) console.log("show task details") }} /> <lable>In Person</lable> </li> <li> <input type="radio" checked={inPerson} name="singlegroup" value="online" onChange={(e) => { setOnline(e.target.value) setInPerson(!e.target.value) console.log("dont show task detail") }} /> <lable>Online</lable> </li> </ul> <TaskDetails /> { online && <Component1/> } { inPerson && <Component2/> } </div> ) } export default NewTask