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;

Umair Riaz · Accepted Answer · 2020-12-31 15:31:53Z

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;

answered Dec 31, 2020 at 15:31

Umair Riaz

4764 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Siva Kondapi Venkata · Accepted Answer · 2020-12-31 17:41:30Z

No need to useEffect here and useState only having the index is enough. Try something like this snippet. Generate the random index on each button click.

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

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

  const [randomIndex, setRandomIndex] = React.useState(-1);

  const data = randomIndex !== -1 ? nameList[randomIndex] : startingName[0];

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.meaning}</p>
      <button onClick={() => setRandomIndex(Math.floor(Math.random() * nameList.length))}>
        Get Random 
      </button>
    </div>
  );
};

ReactDOM.render(<GeneratorNew /> , document.querySelector('#app'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="app"> </div>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related