screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> const { useState, useEffect, useRef } = React; function App() { const [text, setText] = useState( " Welcome to Fontawesomeicons " ); const [results, setResults] = useState(""); const myFunction = () => { setResults(text.trim()); }; return ( <div> <h2>React js String trim Method </h2> <p>Remove Extra Spaces from string in React JS</p> <pre>{text}</pre> <button onClick={myFunction}>click me</button> <p>Results: {results}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script> <style> div { background-color: #f2f2f2; padding: 20px; margin: 10px; border-radius: 5px; } h2 { font-size: 24px; font-weight: bold; margin-bottom: 10px; } p { font-size: 18px; margin-bottom: 10px; } pre { background-color: #ddd; padding: 10px; border-radius: 5px; font-size: 16px; overflow-x: auto; } button { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-bottom: 10px; border-radius: 5px; cursor: pointer; } p:last-of-type { font-size: 20px; font-weight: bold; } </style> </body> </html>