screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"> </div> <script type="text/babel"> const { useState } = React; function App() { const listOfLists = [ [1, 2, 3], ['a', 'b', 'c'], [true, false], ['x', 'y'], ]; const numberOfLists = listOfLists.filter(Array.isArray).length; return ( <div className='container'> <h3>React Js count Number of lists in a list of lists</h3> <p>List of Lists:</p> <ul> {listOfLists.map((list, index) => ( <li key={index}>{JSON.stringify(list)}</li> ))} </ul> <p>Number of Lists: {numberOfLists}</p> </div> ); } ReactDOM.render(<App />, document.getElementById('app')); </script> <style> .container { width: 400px; margin: 0 auto; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; padding: 20px } .container p { font-size: 18px; color: #333; margin-bottom: 10px; } ul { list-style: none; padding: 0; } li { background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 10px; margin: 5px 0; } li:hover { background-color: #f0f0f0; } p:last-child { font-weight: bold; margin-top: 10px; } /* You can add more styles for different states if needed */ </style> </body> </html>