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 NewTask
I am trying to use the radio button to conditional rendering the Component. Ex: when clicking the "inPerson" it will render out the "TaskDetail" component and show others component when using "online". Is there any method to achieve this?
You can render components conditionally based on selected value like below:
...
{
checked === "inPerson" &&
<InpersonComponents />
}
{
checked === "online" &&
<OnlineComponents />
}
...
I recommend this method with conditional rendering
{checked === "inPerson" ? <TaskDetails /> : <SomeOtherComponent />
or
{checked === "inPerson" && <TaskDetails />}
{checked === "online" && <SomeOtherComponent />}
name of inputs should be same if you want to select anyone of them
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