Task.js

import React from "react";
function Task(props) {
	return <li>{props.task}</li>;
}
export default Task;

Tasks.js

import React, { useState } from "react";
import Task from "../Task/index";

function Tasks() {
	const [tasks, setTasks] = useState([]);
	const [newTask, setNewTask] = useState("");
	function handleClick() {
		setTasks((tasks) => [...tasks, newTask]);
		console.log(tasks);
	}
	function handleChange(e) {
		setNewTask(e.target.value);
		console.log(newTask);
	}
	return (
		<div>
			<input type="text" placeholder="create task" onChange={handleChange} />
			<button onClick={handleClick}>Add</button>

			<ul className="taskContainer">
				{tasks.map((task, key) => (
					<Task key={key} task={task} />
				))}
			</ul>
		</div>
	);
}
export default Tasks;