Build a Random Name Generator using ReactJS

// App.js 
import React, { useState } from 'react'; 
import './style.css'; 

const App = () => { 

	// Generated name, copied status, and 
	// lists of first and last names must 
	// all be stored in state variables. 

	const [generatedFirstName, setGeneratedFirstName] = useState(''); 
	const [generatedLastName, setGeneratedLastName] = useState(''); 
	const [copied, setCopied] = useState(false); 

	// Lists of Indian first names and last names 
	const firstNames = [ 
		'Aarav', 'Aditi', 'Akshay', 'Amit', 'Ananya', 
		'Arjun', 'Avani', 'Bhavya', 'Chetan', 'Devi', 
		'Divya', 'Gaurav', 'Isha', 'Kiran', 'Manoj', 
		'Neha', 'Preeti', 'Rajesh', 'Riya', 'Shreya', 
		'Varun', 'Saurabh', 'Ajay', 'Sandip', 'Sadan', 
		'Jyoti', 'Sapna', 'Prem'
	]; 
	const lastNames = [ 
		'Agarwal', 'Bansal', 'Chopra', 'Gupta', 'Jain', 
		'Kapoor', 'Mehta', 'Patel', 'Rao', 'Sharma', 
		'Singh', 'Trivedi', 'Verma', 'Yadav'
	]; 

	// To conjure up a name out of nowhere, use this function. 

	const generate = () => { 
		const randomFirstName = 
			firstNames[Math.floor(Math.random() * firstNames.length)]; 
		const randomLastName = 
			lastNames[Math.floor(Math.random() * lastNames.length)]; 
		setGeneratedFirstName(randomFirstName); 
		setGeneratedLastName(randomLastName); 
		setCopied(false); 
	}; 

	// The name generated can be copied to the 
	// clipboard with this function. 
	const copy = () => { 
		const fullName = 
			`${generatedFirstName} ${generatedLastName}`; 
		const textField = 
			document.createElement('textarea'); 
		textField.innerText = fullName; 
		document.body.appendChild(textField); 
		textField.select(); 
		document.execCommand('copy'); 
		textField.remove(); 
		setCopied(true); 
	}; 

	// Function to change the first name 
	const changeFirstName = () => { 
		const randomFirstName = 
			firstNames[Math.floor(Math.random() * firstNames.length)]; 
		setGeneratedFirstName(randomFirstName); 
		setCopied(false); 
	}; 

	// Function to change the last name 
	const changeLastName = () => { 
		const randomLastName = 
			lastNames[Math.floor(Math.random() * lastNames.length)]; 
		setGeneratedLastName(randomLastName); 
		setCopied(false); 
	}; 

	return ( 
		<div className="name-generator-container"> 
			<h1> 
				Random Indian Name Generator 
			</h1> 
			<div className="buttons-container"> 
				<button className="generate-button"
					onClick={generate}> 
					Generate Name 
				</button> 
				<button className="copy-button"
					onClick={copy}> 
					Copy Name 
				</button> 
			</div> 
			{copied && <p className="copy-success"> 
				Name Copied to Clipboard! 
			</p>} 
			<p className="generated-name"> 
				Generated Name: 
				{`${generatedFirstName} ${generatedLastName}`} 
			</p> 
			<div className="buttons-container"> 
				<button className="change-button"
					onClick={changeFirstName}> 
					Change First Name 
				</button> 
				<button className="change-button"
					onClick={changeLastName}> 
					Change Last Name 
				</button> 
			</div> 
		</div> 
	); 
}; 

export default App;

// index.js 

import React, { StrictMode } from 'react'; 
import { createRoot } from 'react-dom/client'; 

import App from './App'; 

const root = createRoot(document.getElementById('app')); 

root.render( 
	<StrictMode> 
		<App /> 
	</StrictMode> 
);