codedamn

Delete item

Created by Codedamn about a year ago

0

No description provided

12 Comments

    0

    From where the index came in li . Saw the 2nd video .It came instananously at the start of 2nd video .

    @spsaransh

    saransh parashar

    @spsaransh

    10

    If anyone is wondering why the todo list is rendering the keys twice (1, 3, 5, 7..) instead of (0,1,2,3..) like in the video, it's because you're probably in <React.StrictMode>. Go to index.js and delete the <React.StrictMode> tags and it should work like in the video. When you wrap a component in <React.StrictMode>, it will run certain functions twice, thats why it does this. Have fun!

    @deanos

    deanos

    @deanos

    1

    All these lectures are simple narration. Overhyped and Shoddy

    @adityavishwak

    Rambo Vladmir

    @adityavishwak

    0

    My delete function is not working.. Any idea why https://codedamn.com/playground/juxGfhOBO9_ywr1xU-q1s

    @hardick

    Hardick Chatterjee

    @hardick

    0

    hello please help me https://codedamn.com/playground/qS-Yd-35eF1WJdCblNWk6 why is my id not changing

    @yashrith

    C H Yashrith

    @yashrith

    0

    This content was deleted by the author

    @yasss

    Yaser

    @yasss

    0

    Is Using a useState to store the ID preferable over using a global ID outside the App function ?

    @prasadn

    Prasad Nageshkar

    @prasadn

    12

    function App() {

    const [task, setTask] = useState('')
    
    const [todos, setTodos] = useState([])
    
    function addItem(e){
       if(e){e.preventDefault();
           if(task === ""){
               alert('Enter a task first')
            }else{
            setTodos([...todos,task]);
            setTask('')
            }
        }else{
            setTodos([...todos])
        }
    }
        
    function deleteItem(index){
        todos.splice(index,1)
        addItem();
    }
    
    
    return (
    	<div className="App">
        <form onSubmit={addItem}>
            <input 
                type="text" 
                placeholder='write a todo...' 
                value={task} 
                onChange={(e)=>{setTask(e.target.value)}}/>
            
            <button type='submit'> Add Item </button>
        </form>
            <ul>
            {todos.map((todo,index)=>{
                return (
                    <div>
                        <li >{todo}</li>
                        <button onClick={()=>deleteItem(index)}>Delete</button>
                    </div>
                )
            })}
            </ul>
    	</div>
    )
    

    }

    @deepcode89

    Deepak Kakkar

    @deepcode89

    1

    For me values is added by alternate index value.

    @nikita2

    Nikita Vaishya

    @nikita2

    0

    who will explain about the "key" in the above tutorial?

    @sachin648739f8

    Sachin Varma

    @sachin648739f8

    1

    i did that with just vanilla javascript

    @x3nogladiat0r

    irazli mudapro

    @x3nogladiat0r

    0

    This explanation is not straight forward and over complicated.

    @tbabson20

    Babatunde Taiwo

    @tbabson20

Your comment