React Js Change Font Size | inline Style | Increase | Descrese

    const { useState } = React;

    function App() {

      const [isLarge, setIsLarge] = useState(true);

      return (

        <div className='container'>

          <h3>React Js Change Font Size using Tenary Operator</h3>

          <button className='button' onClick={() => setIsLarge(!isLarge)}>

            Toggle Font Size

          </button>

          <p style={{ fontSize: isLarge ? '24px' : '16px' }}>

            This is some text with a dynamic font size.

          </p>

        </div>

​

      );

    }

​

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

  </script>

      const { useState } = React;

​

      // Define the App component

      const App = () => {

        const [fontSize, setFontSize] = useState(16);

​

        // Function to handle font size changes

        const handleFontSizeChange = (event) => {

          const newSize = parseInt(event.target.value, 10); // Parse the input value as an integer

          setFontSize(newSize);

        };

​

        return (

          <div className="container">

            <h3>React Js Change font size dynamically</h3>

            <div className="dynamic-font" style={{ fontSize: `${fontSize}px` }}>

              Text with dynamic font size

            </div>

            <input

              className="font-size-input"

              type="number"

              value={fontSize}

              onChange={handleFontSizeChange}

              min="10" // Set the minimum value allowed

              max="50" // Set the maximum value allowed

            />

          </div>

        );

      };

​

      ReactDOM.render(<App />, document.getElementById("app"));

    </script>