hello everyone, so I started building a Todo app using create-react-app and hooks. I seem to have a issue trying to map over the todos array and display the indexes as <li></li>
can anyone help me? In the browser its says todos
is undefined.
import './App.css';
import React, { useState } from 'react'
function App() {
const [ { input, todos }, setTodo ] = useState({input:"", todos:[]});
const handleChange = (e) => {
setTodo(() =>({
input: e.target.value
}));
};
const handleTodo = ()=>{
setTodo(()=>({
todos: todos.push(input)
}))
}
return (
<div className="App">
<div className="container">
<div className="todo-input">
<h2>Add a ToDo...</h2>
<input type="text" className="input" placeholder="New Todo..." value={input} onChange={handleChange}></input>
<button className="add-todo" onClick={handleTodo}>Add Todo</button>
</div>
<div className="todo-items">
<ul>
{todos.map((arr,i)=>{
let x = <li key={i}>{arr[i]}</li>;
return x;
})}
</ul>
</div>
</div>
</div>
);
}
export default App;