How to use array methods in real project (example) add new record
Tags: webdev, javascript, beginners, react
Published: 2024-03-19 07:26:37

Sure, let's consider a simple React project where we have an array of items representing tasks, and we want to perform various operations on this array using different array methods.

Assume we have a project management application where users can add, delete, and mark tasks as completed. Here's how we can utilize array methods in such a project:

```js
import React, { useState } from 'react';

function App() {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Task 1', completed: false },
    { id: 2, title: 'Task 2', completed: true },
    { id: 3, title: 'Task 3', completed: false },
  ]);

  // Add a new task
  const addTask = () => {
    const newTask = {
      id: tasks.length + 1,
      title: `Task ${tasks.length + 1}`,
      completed: false,
    };
    setTasks([...tasks, newTask]);
  };

  // Delete a task
  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  // Toggle completion status of a task
  const toggleCompletion = (id) => {
    setTasks(tasks.map(task => {
      if (task.id === id) {
        return { ...task, completed: !task.completed };
      }
      return task;
    }));
  };

  return (
    <div>
      <h1>Task Manager</h1>
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => toggleCompletion(task.id)}
            />
            <span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
              {task.title}
            </span>
            <button onClick={() => deleteTask(task.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;


```

In this example:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ku13yp1ritcet3j5oa1t.jpg)


- We use the `useState` `hook` to manage the array of tasks.
- addTask `function` `adds` a new task to the array.
- deleteTask `function` `removes` a task from the array.
- toggleCompletion `function` `toggles` the completion status of a task.
- We render the tasks in a list, allowing users to mark them as completed or delete them.

This example demonstrates how you can use array methods like `map()`, `filter()`, and `map()` in a React project to manage and manipulate arrays of data effectively.

[Array methods in react.js ](https://dev.to/04anilr/how-to-use-array-methods-in-real-project-example-add-new-record-3o82)
[Fragment in react.js](https://dev.to/04anilr/fragment-in-reactjs-example-of-fragment-299a) 
[Conditional rendering in react.js](https://dev.to/04anilr/conditional-rendering-in-react-conditional-rendering-example-in-react-3j46)
[Children component in react.js](https://dev.to/04anilr/methods-of-react-children-component-in-react-4ol7)
[use of Async/Await in react.js](https://dev.to/04anilr/how-to-use-asyncawait-3a3o)
[Array methods in react.js](https://dev.to/04anilr/array-methods-in-reactjs-36jb)
[JSX in react.js](https://dev.to/04anilr/jsx-in-reactjs-3f7o)
[Event Handling in react.js](https://dev.to/04anilr/event-handling-in-react-5hc7)
[Arrow function in react.js](https://dev.to/04anilr/arrow-functions-in-react-4gb2)
[Virtual DOM in react.js](https://dev.to/04anilr/how-to-work-virtual-dom-in-react-dom-1b39)
[React map() in react.js](https://dev.to/04anilr/how-to-create-react-map-24pp)
[How to create dark mode in react.js](https://dev.to/04anilr/how-to-create-dark-mode-in-react-js-2kn2)
[How to use of Props in react.js](https://dev.to/04anilr/props-and-state-with-example-1bl1)
[Class component and Functional component](https://dev.to/04anilr/class-component-functional-component-in-react-k43)
[How to use of Router in react.js](https://dev.to/04anilr/how-to-use-of-router-in-reactreact-router-1163)
[All React hooks explain ](https://dev.to/04anilr/react-hooks-cheat-sheet-2hic)
[CSS box model ](https://dev.to/04anilr/css-box-model-work-2k0a)
[How to make portfolio nav-bar in react.js](https://dev.to/04anilr/how-to-make-nav-bar-for-portfolio-website-365m)