I'm a beginner at React.Js and I just made the following code in my App.js file:
import React, { useState } from 'react';
import {v4 as uuidv4} from "uuid";
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
import "./App.css";
import Tasks_comp from "./components/Tasks";
import AddTask from './components/AddTask';
import Header from './components/Header';
const App = () => {
const [tasks_var, setTasks] = useState([
{
id: "1",
title: "study",
completed: false,
},
{
id: "2",
title: "read",
completed: true,
}
]);
const handleTaskClick = (taskId) => {
const newTasks = tasks_var.map((cada_task) =>{
if (cada_task.id === taskId){
return {...cada_task, completed: ! cada_task.completed}
}
else{
return cada_task;
};
});
setTasks(newTasks);
}
const handleRemoveClick = (taskId) => {
const newTasks = tasks_var.filter(function(obj) {
return obj.id !== taskId
})
//também possível fazer com método splice. pesquisar
setTasks(newTasks);
}
const handleTaskAddition = (taskTitle) => {
const newTasks = [...tasks_var, { //dica abaixo
title: taskTitle,
id: uuidv4(), //valor aleatório
completed: false,
}]; // equivalente ao push
setTasks(newTasks);
}
return (
<Router>
<div id='my_div' className="container">
<Header/>
<Routes>
<Route path='/' element={() => (
<React.Fragment>
<AddTask addTask_atr={handleTaskAddition}/>
<Tasks_comp task_rmv_click={handleRemoveClick} tasks_atr={tasks_var} task_arg_click={handleTaskClick}/>
</React.Fragment>
)} />
</Routes>
</div>
</Router>
);
}
export default App;
There is no mistake. But my problem is that the components inside routes are not loading the moment I start the site.
The component 'header' is being shown, but 'AddTask' and 'Tasks_comp' are not. Can anybody help me?
I'm actually doing a react course, but the teacher is using an older version of react, and I want to learn the newer version.
He does not need to use Routes. But nowadays I'm only able to use Route if I'm inside a Routes component, right?
<div id='my_div' className="container">
?