calling component with dynamic name in react js

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

// making all uppercase
city.toUpperCase();

//removing spaces and making all lowercase
city = city.trim().toLowerCase();

//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);

onClick={() => window.open(url, "_blank")}

import { useEffect } from 'react';

export const useClickOutside = (ref, setIsModalOpen) => {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsModalOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
};

<div class="avatar__basic-s border--rad-f">
    <img class="avatar__img" src="../assets/images/face_3.jpg" srcset="
                      ../assets/images/face_3.jpg 1x,
                      ../assets/images/face_3.jpg 2x
                    " alt="face demo" />
</div>
<div class="avatar__basic-m border--rad-f">
    <img class="avatar__img" src="../assets/images/face_5.jpg" srcset="
                      ../assets/images/face_5.jpg 1x,
                      ../assets/images/face_5.jpg 2x
                    " alt="face demo" />
</div>
<div class="avatar__basic-l border--rad-f">
    <img class="avatar__img" src="../assets/images/face_1.jpg" srcset="
                      ../assets/images/face_1.jpg 1x,
                      ../assets/images/face_1.jpg 2x
                    " alt="face demo" />
</div>
<div class="avatar__basic-xl border--rad-f">
    <img class="avatar__img" src="../assets/images/face_4.jpg" srcset="
                      ../assets/images/face_4.jpg 1x,
                      ../assets/images/face_4.jpg 2x
                    " alt="face demo" />
</div>

//Don't Forget to add permissions in info.pList for camera and gallery

struct ImagePicker{
    static func callImagePicker(_ viewController: UIViewController){
        let imagePicker = UIImagePickerController()
        imagePicker.delegate = viewController as? any UIImagePickerControllerDelegate & UINavigationControllerDelegate
        imagePicker.allowsEditing = true
        
        let alertController = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
        
        alertController.addAction(UIAlertAction(title: "Photo Library", style: .default, handler: { (action) in
            imagePicker.sourceType = .photoLibrary
            viewController.present(imagePicker, animated: true, completion: nil)
        }))
        
        if UIImagePickerController.isSourceTypeAvailable(.camera) {
            alertController.addAction(UIAlertAction(title: "Camera", style: .default, handler: { (action) in
                imagePicker.sourceType = .camera
                viewController.present(imagePicker, animated: true, completion: nil)
            }))
        }
        
        alertController.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))
        
        viewController.present(alertController, animated: true, completion: nil)
    }
}

//Inside view Controller

extension Your_View_Controller: UIImagePickerControllerDelegate, UINavigationControllerDelegate{
    
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let image = info[UIImagePickerController.InfoKey(rawValue: "UIImagePickerControllerEditedImage")] as? UIImage{
            Your_Image_View.image = image
            picker.dismiss(animated: true, completion: nil)
        }
    }
    
    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        picker.dismiss(animated: true, completion: nil)
    }
    
}

import React from 'react';

const ComponentA = () => <h1>Component A</h1>;
const ComponentB = () => <h2>Component B</h2>;

const componentMap = {
  a: ComponentA,
  b: ComponentB,
};

const MyComponent = ({ type }) => {
  const ComponentToRender = componentMap[type];

  return <ComponentToRender />;
};

export default MyComponent;

const wow = async () => {
    const fetchreturn =  await new Promise((resolve) => resolve(55))
                        
                        .then((jsonData) => {
                            let tempArr = [];
                            console.log(jsonData);
                            return jsonData;
                        }).then((yes) => {
                            console.log(yes+10);
                            return (yes+20);
                        })
                        .catch((error) => {
                            // const boxerr = { msg: "Technical Error - fail to fetch data" };
                            console.warn(error, "fetch failed");
                            // navigate(-1);
                            // navprocess(boxerr);
                        });
                        
                        console.log("-0-0-0-0-0-0",fetchreturn);
    };
    wow();

this.state = {
	zombies:[
    {
    	name: 'Zombie'
    },{
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    }
    ]
}

render() {
	return (
    	<div>
        {
        	this.state.zombies.map(zombie => <h1>{zombie.name}</h1>)
        }
        
        </div>
    )
}

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);


  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}