React js error in a simple function that takes an array and returns a random value

Question

I am getting an error that I am not able to figure, its about a function that takes an array and returns a random value from it. I used the same function last time and there was no such error

helpers.js

function choice(arr) {
  let randomIndex = Math.floor(Math.random() * 3);
  return arr[randomIndex];
}

export { choice };

box.js

import React, { Component } from 'react';
import {choice} from './helpers';
 import './Box.css'

class Box extends Component {
    static defaultProps = {
        allColors: ["purple", "magenta", "violet", "pink"]
    };
    constructor(props){
        super(props);
        this.state = {color: choice(this.props.allcolors)};
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){

    }
    render(){
        return(
            <div className="Box" style={{backgroundColor: this.state.color}
            } onClick={this.handleClick}>

            </div>
        );
    }
}

export default Box;

here is the error

No, I am a beginner and dont know much about lifecycle methods. I was just following a tutorial and double checked the code many times, yet in tutorial it works but not in mine — Vaibhaw kr
– Vaibhaw kr, Commented Dec 14, 2019 at 17:06

Wouter Raateland · Accepted Answer · 2019-12-14 17:07:07Z

6

There are two mistakes in your code:

this.props.allcolors is undefined, because you have set the prop allColors with uppercase "C"
This might not be a problem in your specific scenario, but in general, the function choice, won't give you your desired result. It now only works correctly for arrays of length 3. To fix this, you could change 3 into arr.length like so:

function choice(arr) {
  let randomIndex = Math.floor(Math.random() * arr.length);
  return arr[randomIndex];
}

answered Dec 14, 2019 at 17:07

Wouter Raateland

1,0579 silver badges14 bronze badges

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

1 Comment

Wouter Raateland Over a year ago

That happens from time to time... you're welcome! You could mark this answer as accepted if you like :)

Collectives™ on Stack Overflow

React js error in a simple function that takes an array and returns a random value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related