React/JS Join two arrays together in a filter

Question

React

As you can see below I have 5 words and 4 colors. In my CardList I take the first 4 words (given at random). Then I want to pass in a color at random to each word. I have a shuffled_colors array that takes care of the randomness. Now i just want the ith color on the ith card. When I pass in props.colors it just passes in the entire array. I'm not sure how to get the ith color off of it

App.js

const App = () => {
  var shuffleSeed = require('shuffle-seed');
  const words = ['One','Two', 'Three','Four','Five']
  const color= ['blue','blue','red','red']
  var shuffled_words = shuffleSeed.shuffle(words,"Kappa2");
  var shuffled_color = shuffleSeed.shuffle(color,"teams");

  console.log(shuffled_words)
  return (
    <div className="App">
      <h1>CodeNames</h1> 
      <CardList words={shuffled_words} colors={shuffled_color }/>
    </div>
  );
}

CardList.component

export const CardList = (props) => (
  <div className='card-list'>
    {props.words.filter((word, idx) => idx < 4)
      .map(word => (
        <Card key={word} word={word} color={props.colors}/>
      ))}
  </div>
)

First every React question here. Let me know if I need anything else.

Guru Hadadi · Accepted Answer · 2020-06-09 02:56:37Z

1

You need to use props.colors[index]

Working demo

Code snippet

export const CardList = props => (
  <div className="card-list">
    {props.words
      .filter((word, idx) => idx < 4)
      .map((word, index) => (
        <div key={word} word={word} color={props.colors[index]}>
          {word} '--' {props.colors[index]}
        </div>
      ))}
  </div>
);

export default function App() {
  var shuffleSeed = require("shuffle-seed");
  const words = ["One", "Two", "Three", "Four", "Five"];
  const color = ["blue", "blue", "red", "red"];
  var shuffled_words = shuffleSeed.shuffle(words, "Kappa2");
  var shuffled_color = shuffleSeed.shuffle(color, "teams");

  console.log(shuffled_words);
  return (
    <div className="App">
      <h1>CodeNames</h1>
      <CardList words={shuffled_words} colors={shuffled_color} />
    </div>
  );
}

answered Jun 9, 2020 at 2:56

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

React/JS Join two arrays together in a filter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related