Source Code For Todo list

import React, { useState } from "react";
import "./styles.css";
import Todolist from "./Todolist.js";
export default function App() {
  const [todolist, settodolist] = useState([]);
  const [tvalue, setvalue] = useState("");
  function store(event) {
    const value = event.target.value;
    setvalue(value);
  }
  function addtext() {
    settodolist((prev) => {
      return [...prev, tvalue];
    });
    setvalue("");
  }
  function checked(id) {
    settodolist((prev) => {
      return todolist.filter((value, index) => {
        return index !== id;
      });
    });
  }
  return (
    <div className="App">
      <h1>To-do list</h1>
      <img src="https://picsum.photos/450/300" alt="a" />;
      <h2>What tasks are on your mind today?</h2>
      <input type="text" name="items" value={tvalue} onChange={store} />
      <button class="myButton" onClick={addtext}>
        Add
      </button>
      <div>
        <h3>Your checklist for today looks like:</h3>
        <ol>
          {todolist.map((value, index) => {
            return (
              <Todolist
                id={index}
                lochecked={checked}
                key={index}
                item={value}
              />
            );
          })}
        </ol>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#00cba9"
          fill-opacity="1"
          d="M0,160L48,181.3C96,203,192,245,288,229.3C384,213,480,139,576,106.7C672,75,768,85,864,106.7C960,128,1056,160,1152,192C1248,224,1344,256,1392,272L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
        ></path>
      </svg>
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}
body {
  background-color: yellow;
}
h1 {
  color: red;
  font-size: 12vh;
}
li {
  color: blue;
  font-size: 6vh;
  text-align: center;
}
.myButton {
  box-shadow: inset 0px 0px 15px 3px #23395e;
  background: linear-gradient(to bottom, #2e466e 5%, #415989 100%);
  background-color: #2e466e;
  border-radius: 17px;
  border: 1px solid #1f2f47;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 22px;
  padding: 6px 13px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #263666;
  &:hover {
    background: linear-gradient(to bottom, #415989 5%, #2e466e 100%);
    background-color: #415989;
  }
  &:active {
    position: relative;
    top: 1px;
  }
}
input {
  font-size: 5vh;
  border-radius: 22px;
}

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

import React from "react";

function Todolist(props) {
  return (
    <li
      onClick={() => {
        props.lochecked(props.id);
      }}
    >
      {props.item}
    </li>
  );
}
export default Todolist;

{
  "name": "to-do-list",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "react": "17.0.0",
    "react-dom": "17.0.0",
    "react-scripts": "3.4.3"
  },
  "devDependencies": {
    "typescript": "3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}