Reactjs Share Data Between Components Method 2 : LocalStorage + useState Hook

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Share Data Between Components Method 2 : LocalStorage + useState Hook.

For reactjs new comers, please check the below link:

• Reactjs Basic Tutorials

Guys here is the working code snippet and please follow carefully:

1. Guys you need to add this code into your first component like I added inside my Home.js file:

import {useState} from 'react';
function Home() {
    const [message, setMessage] = useState('');

    const handleChange = event => {
        setMessage(event.target.value);
        localStorage.setItem('message', event.target.value);
    };
    
    return (
       <div className="home container p-5">
            <p>Home</p>
            <input
                type="text"
                id="message"
                name="message"
                onChange={handleChange}
                value={message}
            />

            <h2>Message: {message}</h2>
        </div>
    );
}
export default Home;

2. Guys you need to add this code into your first component like I added inside my About.js file:

function About() {
    return (
       <div className="about container p-5">
        Getting shared data from Home.js file input message field : <strong>{localStorage.getItem('message')}</strong>
        </div>
    );
}
export default About;

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks