React useState Previous value, Spread Operator, Complex States, Map

React App sample code that implements useState accessing previous value. Using spread operator in raeact js. Dealing with complex states, mapping state data to html element.

src/components/App.js

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

function App() {
  const [inputText, setInputText] = useState("");
  const [items, setItems] = useState([]);

  function handleChange(event) {
    const newValue = event.target.value;
    setInputText(newValue);
  }

  function addItem() {
    setItems((prevItems) => {
      return [...prevItems, inputText];
    });
    setInputText("");
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <div className="form">
        <input onChange={handleChange} type="text" value={inputText} />
        <button onClick={addItem}>
          <span>Add</span>
        </button>
      </div>
      <div>
        <ul>
          {items.map((todoItem) => (
            <TodoListItem title={todoItem} />
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

src/components/TodoListItem.js

import React, { useState } from "react";

export function TodoListItem(props) {
  const [done, setStatus] = useState(false);

  function clickHandler() {
    setStatus((prevState) => {
      return !prevState;
    });
  }

  return (
    <li
      style={{ textDecoration: done 
        ? "line-through" 
        : "none" }}
      onClick={clickHandler}
    >
      {props.title}
    </li>
  );
}

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

public/style.css

body {
  background-color: #ffeaa7;
  min-height: 70vh;
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  color: hsl(198, 1%, 29%);
  font-family: "Architects Daughter", cursive;
  text-align: center;
  font-size: 130%;
}

.container {
  width: 100%;
  height: auto;
  min-height: 500px;
  max-width: 500px;
  min-width: 250px;
  background: #f1f5f8;
  background-image: radial-gradient(#bfc0c1 7.2%, transparent 0);
  background-size: 25px 25px;
  border-radius: 20px;
  box-shadow: 4px 3px 7px 2px #00000040;
  padding: 1rem;
  box-sizing: border-box;
}
.heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.heading h1 {
  transform: rotate(2deg);
  padding: 0.2rem 1.2rem;
  border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
  background-color: #fdcb6e;
  font-size: 1.5rem;
}

.form input {
  box-sizing: border-box;
  background-color: transparent;
  padding: 0.7rem;
  border-bottom-right-radius: 15px 3px;
  border-bottom-left-radius: 3px 15px;
  border: solid 3px transparent;
  border-bottom: dashed 3px #fdcb6e;
  font-family: "Architects Daughter", cursive;
  font-size: 1rem;
  color: hsla(260, 2%, 25%, 0.7);
  width: 70%;
  margin-bottom: 20px;
}

button {
  padding: 0;
  border: none;
  font-family: "Architects Daughter", cursive;
  text-decoration: none;
  padding-bottom: 3px;
  border-radius: 5px;
  background-color: #ffeaa7;
}
button span {
  background: #f1f5f8;
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  border: 2px solid hsl(198, 1%, 29%);
}

li {
  text-align: left;
  position: relative;
  padding: 0.5rem;
}

Demo: https://codesandbox.io/s/react-prev-state-qbz2p