Scribd
Upload
24 views

Assignment 5

This document contains code for a ToDo application built with React and MongoDB/Firebase. It includes: 1) An App.js component that manages state for the todo items and input value. It allows adding/removing items by calling functions on state updates. 2) A List.jsx component that displays each todo item and calls a function to remove an item. 3) An Index.js file that renders the App component to the DOM. The App component manages state for the todo items and input value. Users can add items by typing in the input and clicking add, which will update the todo array in state. They can also remove items by calling a delete function, filtering

Uploaded by

rjadhav0075
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views

Assignment 5

This document contains code for a ToDo application built with React and MongoDB/Firebase. It includes: 1) An App.js component that manages state for the todo items and input value. It allows adding/removing items by calling functions on state updates. 2) A List.jsx component that displays each todo item and calls a function to remove an item. 3) An Index.js file that renders the App component to the DOM. The App component manages state for the todo items and input value. Users can add items by typing in the input and clicking add, which will update the todo array in state. They can also remove items by calling a delete function, filtering

Uploaded by

rjadhav0075
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Name:- Birari chetan prakash Div-FYMCA-B

Roll no:- 08
Sub:- AWT (Batch-1)
_______________________________________________________________
Assignment No.:- 06
Problem Statement:-

Build a ToDo Application with React and MongoDB/Firebase.

Program :-

1) App.js code :-

import {useState} from 'react';


import List from './List';

function App() {
const [val , setval] = useState('');
const [arr , setarr] = useState([])

function handle(e) {
setval(e.target.value);
}

function changevalue() {
setarr((olditems)=>{
return [...olditems , val]
})
setval('')
}

function deleteitem(id) {
setarr((olditems)=>{
return olditems.filter((value , index)=>{
return index !== id;
})
})
}
return (
<div className="App">
<input type='text' placeholder='add' onChange={handle}/>
<button onClick={changevalue}>add</button>
{arr.map((value, index)=>{
return <List key={index} id={index} text={value} delete={deleteitem} />
})}
</div>
);
}

export default App;

2) List.jsx Code :-

import {useState} from 'react';


import List from './List';

function App() {
const [val , setval] = useState('');
const [arr , setarr] = useState([])

function handle(e) {
setval(e.target.value);
}

function changevalue() {
setarr((olditems)=>{
return [...olditems , val]
})
setval('')
}

function deleteitem(id) {
setarr((olditems)=>{
return olditems.filter((value , index)=>{
return index !== id;
})
})
}
return (
<div className="App">
<input type='text' placeholder='add' onChange={handle}/>
<button onClick={changevalue}>add</button>
{arr.map((value, index)=>{
return <List key={index} id={index} text={value} delete={deleteitem} />
})}
</div>
);
}

export default App;

Index.js Code :-

import React from 'react';


import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

You might also like