Source Code:

import React, { useState } from “react”;

import “./styles.css”;

export default function App() {

const [todos, setTodos] = useState([]);

const [newtodo, setNewtodo] = useState(“”);

const changetodo = (e) => {

setNewtodo(e.target.value);

};

const savetodo = async () => {

const updatedState = todos;

updatedState.push(newtodo);

await setTodos(updatedState);

setNewtodo(“”);

};

return (

<>

<div className=”App”>

<h1>Todo App</h1>

</div>

<div className=”addTodo”>

<input

type=”text”

placeholder=”Enter Task name”

onChange={changetodo}

value={newtodo}

/>

<button onClick={savetodo}>Add Todo</button>

</div>

<div className=”todos”>

{todos.map((data, index) => (

<p key={index}>{data}</p>

))}

</div>

</>

);

}

--

--

Abipravi

Founder and CEO of Abipravi. Reactjs expert and Django developer. Intrested in artifical intellegence and Web development. Blogging and Teaching in youtube🔥🔥