Mapping an index from an array of strings

Question

I am trying to have a code that will return a random sentence from an array. Kind of like a random quote machine except it’s 3 different quotes on the page at the same time. Here’s how it looks

<div className="">
          {this.state.first.map((first) => (
            <div className="">{first}</div>
          ))}
        </div>
        <div className="">
          {this.state.second.map((second) => (
            <div className="">{second}</div>
          ))}
        </div>
        <div className="">
          {this.state.third.map((third) => (
            <div className="">{third}</div>
          ))}
        </div>

What I want to do is have the map function only return one from each array. I tried this by doing this.

 {this.state.first.map((first) => (
            <div className="">{first[0]}</div>
          ))}

This gave me the first letter from each sentence. But what am I missing to have it give me the whole sentence returning instead of just the first letter? The whole code is viewable here https://github.com/Imstupidpleasehelp/CovidConspiracyGenerator/blob/master/src/Slotmachine.jsx Thank you in advance for your input.
Edit for clarification. I want to have a random index of each array display to the page when a user presses a button. I already have a function that will give me a random number between 1 and 10. I want to be able to have it work like a random quote machine.

you are most probably having a wrong approach, have an object instead which propertis will have an array value — EugenSunic
– EugenSunic, Commented Sep 5, 2020 at 17:00

CertainPerformance · Accepted Answer · 2020-09-05 16:56:54Z

2

Since you only want one element from the array of sentences, access one of the indicies of the .first, .second, .third arrays instead of trying to .map them. For example:

<div>{this.state.first[0]}</div>
<div>{this.state.second[0]}</div>
<div>{this.state.third[0]}</div>

More likely, you'd want to save the current index being displayed in state, and have something like:

<div>{this.state.first[this.state.firstIndex]}</div>
<div>{this.state.second[this.state.secondIndex]}</div>
<div>{this.state.third[this.state.thirdIndex]}</div>

where firstIndex will be a number from 0 to n - 1, where n is the length of this.state.first, and so on for the second and third. To select a new random quote in first, you'd do:

this.setState({
  ...this.state,
  firstIndex: Math.floor(Math.random() * this.state.first.length)
});

answered Sep 5, 2020 at 16:56

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

3 Comments

Dylan Bozarth Over a year ago

Thanks for your answer, your solution of having it not map works, however I am trying to have it map dynamically in a function that can be called again. Is there a way I can do that?

CertainPerformance Over a year ago

What do you mean by I am trying to have it map dynamically in a function that can be called again, can you edit your question to clarify? Since you only want one sentence from each bunch, using .map at all doesn't make sense - instead, put the current index being displayed into state, and call setState to change to a different index.

Dylan Bozarth Over a year ago

"instead, put the current index being displayed into state, and call setState to change to a different index." I think I will do this, it's a much better idea. Thank you.

Collectives™ on Stack Overflow

Mapping an index from an array of strings

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related