Javascript - Routing to a specific component

Abijith
September 19, 2023
133 views
0 votes
2 Answers

I have just started with the project (task management app) using ReactJS.

Page-1: Home Page

Here it will display the created tasks if any or else it should display "no tasks here"
It has two buttons namely Add Task and Delete Task

Page -2: Add Task

I have created a separate component having JSX for it

When I click the Add Task Button, it should redirect to the add task component and appear in the screen.
Here it should not display below the app component.

When I tried, it’s coming in that way.

File: App.js

import "./App.css";
import TaskDisplay from "./TaskDisplay/taskDisplay";
import TaskCreate from "./TaskCreate/TaskCreate";
import { useState } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  NavLink,
} from "react-router-dom";

function App() {
  const [tasks, setTasks] = useState([]);
  
  return (
    <Router>
      <div className="container">
        <header>
          <p className="title">Task Manager</p>
        </header>
        <div className="task-shower">
          <div className="show-tasks">
            {tasks.length === 0 && (
              <p className="none-message">There are no tasks here! 😉</p>
            )}
            {tasks.length > 0 && <TaskDisplay />}
          </div>
          <div className="options">
            <NavLink to="/Create-Task">Create Task</NavLink>
            <button>Delete Task</button>
          </div>
        </div>
      </div>
      <Routes>
        <Route path="/" element={<TaskDisplay />} />
        <Route path="/Create-Task" element={<TaskCreate />} />
      </Routes>
    </Router>
  );
}

export default App;

File: TaskCreate.js

import styles from "./TaskCreate.module.css";

export default function TaskCreate() {
  return (
    <div className={styles.taskcontainer}>
      <section>
        <h2>Create a Task </h2>
        <form>
          {/* Inputting Task Title*/}
          <label htmlFor="name">Task Name:</label>
          <input type="text" className={styles.input} id="name" required />

{/* Inputting Task Description*/}
          <label htmlFor="desc">Task Description:</label>
          <textarea
            id="desc"
            autoCorrect="on"
            className={styles.textarea}
            required
          />
        </form>
      </section>
    </div>
  );
}

Project Picture:
Home Page:

After Clicking Create Task:

What should I need to correct in this code?

Answers

Updated:
If I understand you correctly, you want to display only the create-task view when you click on "Create Task" i.e TaskCreate.js. If so, the issue is your App.js setup.

Your page is displaying that way because the code in App.js will always display, and what you want to do is switch your ‘TaskDisplay’ page to ‘TaskCreate’ page, when you click on "Create Task".

You did not share your TaskDisplay.js file but it seems it’s supposed to handle the list of tasks, and if no tasks is available, show "No tasks".

So, you should modify TaskDisplay to handle the conditional view

Modify your files like this:

App.js

import "./App.css";
import TaskDisplay from "./TaskDisplay/taskDisplay";
import TaskCreate from "./TaskCreate/TaskCreate";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  NavLink,
} from "react-router-dom";

function App() {
  
  return (
    <Router>
      <Routes>
        <Route path="/" element={<TaskDisplay />} />
        <Route path="/Create-Task" element={<TaskCreate />} />
      </Routes>
    </Router>
  );
}

export default App;

TaskDisplay.js

// add other necessary imports

export default function Home() {
  const [tasks, setTasks] = useState([]);

//add other methods or variables you already defined

  return (
    <div className="container">
        <header>
          <p className="title">Task Manager</p>
        </header>
        <div className="task-shower">
          <div className="show-tasks">
            {tasks.length === 0 ? (
              <p className="none-message"> There are no tasks here! 😉</p> 
    ) : ( //move the code currently in TaskDisplay here instead of importing it )}
          </div>
          <div className="options">
            <NavLink to="/Create-Task">Create Task</NavLink>
            <button>Delete Task</button>
          </div>
        </div>
      </div>
  );
}

That should render the right component in different pages.

P.S Good luck with your learning!✨

It seems like you want to create tasks and display them using the TaskDisplay component. You plan to store task data as objects in an array and have the TaskDisplay component retrieve and display tasks from that array.

Here’s how you can implement this in your React application:-

TaskCreate.js

import React, { useState } from "react";

export default function TaskCreate({ addTask }) {
  const [taskName, setTaskName] = useState("");
  const [taskDescription, setTaskDescription] = useState("");

  const handleCreateTask = () => {
    if (taskName && taskDescription) {
      const newTask = {
        name: taskName,
        description: taskDescription
      };
      addTask(newTask);
      setTaskName("");
      setTaskDescription("");
    }
  };

  return (
    <div>
      <section>
        <h2>Create a Task</h2>
        <form>
          <label htmlFor="name">Task Name:</label>
          <input
            type="text"
            id="name"
            required
            value={taskName}
            onChange={(e) => setTaskName(e.target.value)}
          />

          <label htmlFor="desc">Task Description:</label>
          <textarea
            id="desc"
            autoCorrect="on"
            required
            value={taskDescription}
            onChange={(e) => setTaskDescription(e.target.value)}
          />
          <button type="button" onClick={handleCreateTask}>
            Create Task
          </button>
        </form>
      </section>
    </div>
  );
}

TaskDisplay.js

import React from "react";

export default function TaskDisplay({ tasks }) {
  return (
    <div>
      {tasks.map((task, index) => (
        <div key={index}>
          <h3>{task.name}</h3>
          <p>{task.description}</p>
        </div>
      ))}
    </div>
  );
}

App.js

import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  NavLink
} from "react-router-dom";
import TaskCreate from "./TaskCreate";
import TaskDisplay from "./TaskDisplay";

function App() {
  const [tasks, setTasks] = useState([]);

  const addTask = (newTask) => {
    setTasks([...tasks, newTask]);
  };

  return (
    <Router>
      <div className="container">
        <div>
          <div>
            {tasks.length === 0 && <p>There are no tasks here!</p>}
            {tasks.length > 0 && <TaskDisplay tasks={tasks} />}
          </div>
          <div>
            <NavLink to="/Create-Task">Create Task</NavLink>
          </div>
        </div>
      </div>
      <Routes>
        <Route path="/" element={<TaskDisplay tasks={tasks} />} />
        <Route path="/Create-Task" element={<TaskCreate addTask={addTask} />} />
      </Routes>
    </Router>
  );
}

export default App;

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Routing to a specific component

Answers