Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading