Assignment 5
Assignment 5
Roll no:- 08
Sub:- AWT (Batch-1)
_______________________________________________________________
Assignment No.:- 06
Problem Statement:-
Program :-
1) App.js code :-
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>
);
}
2) List.jsx Code :-
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>
);
}
Index.js Code :-