Use Simple Values in State in React Functional Components

This project will demonstrate how to Use Simple Values in State in React Functional Components

  • ReactFunctionalComponents
    • src
      • App.js
      • index.js
import React, { useState }  from 'react';

function App() {

    let [age, setAge] = useState(20);
    let [username, setUsername] = useState('abc');
    let [price, setPrice] = useState(4.5);
    let [status, setStatus] = useState(true);

    const changeValue = () => {
        setAge(40);
        setUsername('def');
        setPrice(88);
        setStatus(false);
    }

    return (
        <div>
            Age: {age}
            <br/>
            Username: {username}
            <br/>
            Price: {price}
            <br/>
            Status: {status ? "Show" : "Hide"}
            <br/>
            <input type="button" value="Change State Values" onClick={changeValue} />
        </div>
    );
};

export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

Screenshots