Saving user input in React.js. If user inputs text in an input field, I want to save it-CodePudding

How do you save a text that user typed in reactjs?

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

const ToDo = () => {
    const [input, setInput] = useState('');

    const HandleInputChange = (event) => {
        setInput(event.target.value);
    }

    const SaveInput = () => {
        setInput(document.innerText = input)
    }

    const DeleteInput = () => {
        setInput('');
    }

    return(
        <div>
            <input type={'text'} value={input} onChange={HandleInputChange}/>
            <button onClick={SaveInput}>✓</button>
            <button onClick={DeleteInput}>X</button>
            <br/>
            <br/>
            <ul>
                <li>{input}</li>
            </ul>
            
        </div>
    );
}

export default ToDo;

I want to know how to save a user typed in a input and save it and display it to the user

CodePudding user response：

I got your question, you wanna save input into List Field. You first need to save input into Localstorage of browser and then mapping all input in the list...

Changes in code like-

const SaveInput = () => {
setInput(document.innerText = input)
}

in the above arrow function try to set localstorage with user input and also relaod the page onClick.. After saving input in localstorage now next step is to get value from then mapping it... Hope above solution helping you in getting your result. If you still facing any issue just lemme know.. Thanks