import React, { Component } from 'react';  import { SplitButton, Dropdown } from 'react-bootstrap';    class ThemeSwitcher extends Component {      state = { theme: null }        chooseTheme = (theme, evt) => {      evt.preventDefault();      if (theme.toLowerCase() === 'reset') { theme = null }      this.setState({ theme });    }        render() {      const { theme } = this.state;      const themeClass = theme ? theme.toLowerCase() : 'default';            const parentContainerStyles = {        position: 'absolute',        height: '100%',        width: '100%',        display: 'table'      };            const subContainerStyles = {        position: 'relative',        height: '100%',        width: '100%',        display: 'table-cell',      };            return (        <div style={parentContainerStyles}>          <div style={subContainerStyles}>                      <span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`} style={{ marginBottom: 25 }}>{theme || 'Default'}</span>                        <div className="center-block text-center">              <SplitButton bsSize="large" bsStyle={themeClass} title={`${theme || 'Default Block'} Theme`}>                <Dropdown.Item eventKey="Primary Block" onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item>                <Dropdown.Item eventKey="Danger Block" onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item>                <Dropdown.Item eventKey="Success Block" onSelect={this.chooseTheme}>Success Theme</Dropdown.Item>                <Dropdown.Item divider />                <Dropdown.Item eventKey="Reset Block" onSelect={this.chooseTheme}>Default Theme</Dropdown.Item>              </SplitButton>            </div>            </div>        </div>      );     }   }  export default ThemeSwitcher;

Choose the correct option when the users button is clicked ?import React, { useState, useEffect } from "react";function App() {    const [type, setType] = useState(null);    const [loading, setLoading] = useState(false);    useEffect(() => {        if (type) {            setLoading(true);            setTimeout(() => {                setLoading(false);            }, 5000);        }    }, [type]);    return (        <div>            {loading ? (                <h1>Loading</h1>            ) : (                <div>                    <button onClick={() => setType("posts")}>Posts</button>                    <button onClick={() => setType("users")}>Users</button>                    <button onClick={() => setType("comments")}>                        Comments                    </button>                </div>            )}        </div>    );}export default App;ANothing will happenB3 seconds after the button is clicked we can see three buttons on the screen.C3 seconds after the button is clicked we can see loading on the screen.Dif posts button had been clicked instead of the users button we would see loading on the screen after 3 seconds.

as for now i have this 2 components ...nav and home ....import React, { useState } from 'react'import { FaBars, FaTimes } from "react-icons/fa";export const Navbar = () => { const [nav,setNav] = useState(false); const links = [ { id: 1, link: 'home' }, { id: 2, link: 'about' }, { id: 3, link: 'portfolio' }, { id: 4, link: 'experience' }, { id: 5, link: 'contact' }, ] return ( <div className='flex justify-between items-center px-4 bg-black w-full h-20 text-white fixed'> <div> <h1 className='text-5xl font-signature ml-2'>John Maina</h1> </div> <ul className='hidden md:flex'> {links.map(({id, link}) => ( <li key={id} className='cursor-pointer px-4 capitalize font-medium text-gray-500 hover:scale-105'> {link} </li> ))} </ul> <div onClick={() => setNav(!nav)} className='pr-4 text-gray-500 cursor-pointer z-10 md:hidden'> {nav ? <FaTimes size={30}/>: <FaBars size={30}/> } </div> {nav && ( <ul className='flex flex-col justify-center items-center absolute top-0 left-0 w-full h-screen bg-gradient-to-b from-black to-gray-800 text-gray-500'> {links.map(({id, link}) => ( <li key={id} className='px-4 cursor-pointer capitalize py-6 text-4xl'> {link} </li> ))} </ul> )} </div> )}and home ....import React from 'react'import ME from '../assets/heroImage.png'import { MdOutlineArrowRightAlt } from "react-icons/md";export const Home = () => { return ( <div name='home' className=' h-screen w-full bg-gradient-to-b from-black via-black to-gray-800 '> <div className='max-w-screen-lg mx-auto flex flex-col items-center justify-center h-full px-4 md:flex-row'> <div className='flex flex-col justify-center h-full'> <h2 className='text-4xl sm:text-7xl font-bold text-white'> I'm a Full Stack Developer </h2> <p className=' text-gray-500 py-4 max-w-md'> I have 4 years of experience building and desgining softwares. Currently, i I love to work on web applications using technologies like; React, Tailwind, Django, Laravel and mySQL. </p> <div> <button className=' group text-white w-fit px-6 py-3 my-2 flex items-center rounded-md bg-gradient-to-r from-cyan-500 to-blue-500 cursor-pointer'> Portfolio <span className=' group-hover:rotate-90 duration-300'> <MdOutlineArrowRightAlt size={25} className=' ml-1'/> </span> </button> </div> </div> <div> <img src={ME} alt="me" className='rounded-2xl mx-auto w-2/3 md:w-full'/> </div> </div> </div> )}...now the content of the home is starting at the top which make it go under my nave since i have nave fixed .... actualy when on a laptop thimgs are okay but on the phone the content is starting at the top hence going under the nav how can i make it appear after nave on mobile

import React, { Component } from 'react';  class App extends React.Component {   constructor() {        super();              this.state = { displayBio: true };        }        render() {            const bio = this.state.displayBio ? (                <div>                    <p><h3>Javatpoint is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad. We have a team of experienced Java developers and trainers from multinational companies to teach our campus students.</h3></p>               </div>                ) : null;                return (                    <div>                        <h1> Welcome to JavaTpoint!! </h1>                        { bio }                     </div>                );       }  }  export default App;  To set the state, it is required to call the super() method in the constructor. It is because this.state is uninitialized before the super() method has been called.Output

Select the attribute and value, which is used to add a green color button using react-bootstrap Button component: className={"btn btn-success"} className={"success"} variant="success" variant={{"btn-success"}}

Which of the below is the correct syntax for styling a component in React?