To Do list updates an empty string in the list (Next JS)-CodePudding

Hello there i have started an internship i have to build a to do list using NEXT JS. but the problem arises that the app also updates an empty string. i have to work on this and have more than 20 hours to dig up a solution. i wasnt able to solve. i tried passing some parameters but its not working.

import { useState } from "react"
import '../styles/globals.css'

const index=()=>{

    const [userinput,setuserinput]=useState("")
    const [todolist,settodolist]=useState([])

    const handlechange=(e)=>{
        e.preventDefault()
        if(e.target.value!=""){
            setuserinput(e.target.value)
        }
        
        
    }

    const handlesubmit=(e)=>{
       
        settodolist([
            userinput,
            ...todolist
        ])

        e.preventDefault()

    }

    const handledelete=(todo)=>{
        const updatedelete=todolist.filter(todoitem => todolist.indexOf(todoitem) != todolist.indexOf(todo))
        settodolist(updatedelete)
    }


    return(
        <div className="FLEX">
            <h3 className="heading">Welcome to Next JS To Do app</h3>
            <form className="FORM">
               <div className="Wrap">
                    <input type="text" onChange={handlechange} placeholder="Enter a todo item" className="INPUT"></input>
                    <button onClick={handlesubmit} className="Button">Submit</button>
               </div>
            </form>
            <ul>
                {
                    todolist.length>=1?todolist.map((todo,idx)=>{
                        return <li key={idx}>{todo} <button onClick={(e)=>{
                            e.preventDefault()
                            handledelete(todo)
                        }}>Delete</button></li>
                    }):"Enter a Todo List"
                }
            </ul>
        </div>
       
    )
}

export default index

CodePudding user response：

You need to pass the value prop to your input element:

<input type="text" value={userinput} onChange={handlechange} placeholder="Enter a todo item" className="INPUT"></input>

CodePudding user response：

I believe the question is asking to prevent the user from entering a todo item with no name. In this case, do as the previous comment mentioned and add the value prop to the input:

<input type="text" value={userinput} onChange={handlechange} placeholder="Enter a todo item" className="INPUT"></input>

then add this to your handleSubmit function:

  const handlesubmit = (e: any) => {
    e.preventDefault();
    if (userinput != '') {
      settodolist([userinput, ...todolist]);
    }
  };