Daily React 3 - Adding and Deleting Data

Today's react bit is not really a generalized to react application rules but specific to the needs of my app in mind. It is called a 'Math Repository App'.

So motivation is,,, University undergrads and grads are alike struggle in math because they don't know what the heck is going on in the textbook. In the first year of their university, many are struck in panic of their exams because it doesn't ask them to compute something (like what is 1+1?) but to 'prove' something (why is two negative number positive when multiplied?). It is no wonder people are panicking. Furthermore, once they get a sense of what a proof is, students are already graduating without fully tasting what proof can bring to scientific discovery and human progress.

So, it can be very slow for those who learn math proof in university and what's worse,,, some people never give you an answer. Ok, it can be helpful to learn but even to cost my gpa? No! What ends up happening is people dropping their courses. So, voila! Let's make easily accessible math repository app where proofs and axioms are all there and people can still contribute to discover math theorems further down the path without having to go back all the way to whatever textbook you looked upon probably 10 years ago. So, even from professionals, this can bring even faster mathematical discovery.

TLDR? That's fine. This is just app where math axioms and theorems are saved and you can just view it in one click. Don't understand it? Take your time or leave. Life has so many other enjoyable things to do but if you like proof and want to delve into it, all you need to do is keep looking.

So, from last time, I added a function where I can add statement and delete math statements and that state doesn't disappear when I click and navigate to different math textbooks.

So, there are two handlers you can see here: A handler for adding a math statement and a handler for removing a math statement.

I used filter method for deleting an item and concatenate an item to an array and use that to update my axiom state (using setAxioms)

Here's the detail of the code for the handlers.

import React, { useState, useEffect } from "react";
import data from "./data";
import { v4 as uuidv4 } from "uuid";

const Statements = (props) => {
    const [axioms, setAxioms] = useState(props.statements);

    //this connects the state from Components state
    useEffect(() => {
        setAxioms(props.statements);
    }, [props.statements]);

    const removeItem = (id) => {
        let unremovedItem = axioms.filter((sentence) => {
            return sentence.id !== id;
        });
        setAxioms(unremovedItem);
        data[props.index].statements = unremovedItem;
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        const newAxiom = axioms.concat({
            id: uuidv4(),
            statement: document.getElementById("statement").value,
        });
        setAxioms(newAxiom);
        data[props.index].statements = newAxiom;
        document.getElementById("statement").value = "";
    };

    return (
        <>
            <ol>
                {axioms.map((sentence) => {
                    const { id, statement } = sentence;
                    return (
                        <li key={id} className="sentences">
                            <p>
                                <strong>{statement}</strong>
                            </p>
                            <button>EDIT</button>
                            <button onClick={() => removeItem(id)}>
                                REMOVE
                            </button>
                        </li>
                    );
                })}
            </ol>
            <div className="form">
                <form onSubmit={handleSubmit}>
                    <input
                        type="text"
                        name="axiom"
                        id="statement"
                        required="required"
                    />
                    <button>ADD</button>
                </form>
            </div>
        </>
    );
};

export default Statements;

Please note this obviously is UI only and this added and deleted statements will disappear once refreshed.. So, what we will need to do next time is create CRUD app (server side), and connect it to this client side app.

All the codes are in my github :)