Rendering Specific Elements From Array In React

Question

My goal here is to have a box that renders the word of a color in order within the array.

I'm struggling with the concept on rendering each element of the array. I'm assuming you'd need to pick out each element, store it in a variable, and render the variable but I'm hitting a dead end each time I attempt it.

You'll see my commented out attempt in the code below. I also tried forEach but React gave me an error while trying to use forEach.

Additionally, I was told to avoid using .map and a for loop if possible.

import React from 'react'

class ColorSwitch extends React.Component {
    constructor(props) {
        super(props)
            this.state = {
                colors: ["white", "orange", "purple", "black", "green"]
            }
    }

    nextColor = () => {
        let newColor = this.state.colors

        // let setColor = newColor[0] += 1 (DIDNT WORK)

        this.setState({colors: setColor})
    }

    render() {
        let { colors } = this.state
        return(
            <div className="box" onClick={this.nextColor}>
            <p>{this.setColor}</p>
            </div>
        )
    }
}

export default ColorSwitch

Thanks in advance for your help.

Have you tried let setColor = newColor[0] + 1?

Jack Bashford
– Jack Bashford

2019-02-26 23:05:15 +00:00
Commented Feb 26, 2019 at 23:05 — Jack Bashford
– Jack Bashford, Commented Feb 26, 2019 at 23:05

Ori Drori · Accepted Answer · 2019-02-26 23:11:31Z

Get the colors from the props (or use a const if it's static), and store the currentColorIndex inside the state.

When calling nextColor increment the currentColorIndex by 1 (I've used % colors.length to make next cyclic). To render grab the color at the currentColorIndex:

const colors = ["white", "orange", "purple", "black", "green"]

class ColorSwitch extends React.Component {
    state = {
      currentColorIndex: 0
    }

    nextColor = () =>
      this.setState(({ currentColorIndex }) => ({
        currentColorIndex: (currentColorIndex + 1) % this.props.colors.length
      }))

    render() {
        const { currentColorIndex } = this.state
        const { colors } = this.props
        
        const color = colors[currentColorIndex];
        
        return(
            <div className="box" 
            onClick={this.nextColor} 
            style={{ background: color }}>
              <p>{color}</p>
            </div>
        )
    }
}

ReactDOM.render(
  <ColorSwitch colors={colors} />,
  demo
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="demo"></div>

Olian04 · Accepted Answer · 2019-02-26 23:07:28Z

0

I don't know who told you to stay away from .map because that's how you should do it.

import React from 'react'

class ColorSwitch extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
           colors: ["white", "orange", "purple", "black", "green"]
        }
    }

    render() {
        let { colors } = this.state
        return(
            <div>
              {colors.map(color => 
                 <div className="box">
                   <p>{color}</p>
                 </div>
              )}
            </div>
        )
    }
}

export default ColorSwitch

answered Feb 26, 2019 at 23:07

Olian04

6,9002 gold badges31 silver badges56 bronze badges

1 Comment

import han juuryoku Over a year ago

You kind of got baited into this answer because op mentioned forloops and .map, but it looks like they actually only want to render one color at a time, so they don't want to do a mapping.

Collectives™ on Stack Overflow

Rendering Specific Elements From Array In React

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related