javascript - How to display items in React using array.map, useState, useEffect at random with onClick?

Question

I'm trying to make a name generator component that will display a name with its corresponding meaning from an array when the user clicks a button. I'm using useState to set the initial state as well as to cycle through the array randomly, as well as useEffect (although not sure if its necessary). I would prefer to use the array.map() method for randomizing. Component code below:

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

const GeneratorNew = () => {
  const startingName = [{ id: 0, value: "Update Name!" }];

  const nameList = [
      { id: 1, name: 'Astghik', meaning: 'little star' }, 
      { id: 2, name: 'Tagouhi', meaning: 'Queen' }, 
      { id: 3, name: 'Lusine', meaning: 'Moon' }]
  ;

  const [stateOptions, setStateValues] = useState(startingName);
  // startingName.push(...nameList);

  useEffect(() => {
    setStateValues(nameList);
  }, []);

  return (
    <div>
      <h1>{nameList.name}</h1>
      <p>{nameList.meaning}</p>
      <button>
        {stateOptions.map((nameList, index) => (
          <option key={nameList.id}>{nameList.value}</option>
        ))}
      </button>
    </div>
  );
};

export default GeneratorNew;

Answer 1

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

const GeneratorNew = () => {
  const startingName = [{ id: 0, value: "Update Name!" }];

  const nameList = [
      { id: 1, name: 'Astghik', meaning: 'little star' }, 
      { id: 2, name: 'Tagouhi', meaning: 'Queen' }, 
      { id: 3, name: 'Lusine', meaning: 'Moon' }]
  ;

  const [stateOptions, setStateValues] = useState(startingName);


  const handleOnClick = () => {
     setStateValues(nameList[Math.floor(Math.random() * (nameList.length - 1))])
  }

  return (
    <div>
      <h1>{nameList.name}</h1>
      <p>{nameList.meaning}</p>
      <button onClick={() => handleOnClick()}>
        {stateOptions.map((nameList, index) => (
          <option key={nameList.id}>{nameList.value}</option>
        ))}
      </button>
    </div>
  );
};

export default GeneratorNew;