Is there a way to make a button's color random using the code below?

user_14517971 0
Viewed 287

I am currently working on a react native project, where at a click of a button, the button's color will change. I was asked to copy code from an image that was 144px. The image quality wasn't the greatest. Here's the code:

import React, { Component } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0,
      buttonColor: 'blue',
    };
  }
  componentDidMount() {
    setInterval(this.incrimentCounter, 100000000000);
  }
  incrimentCounter = () => {
    this.setState({ counter: this.state.counter + 1 });
  };
  componentDidUpdate() {
    console.log('Counter value has changed');
  }
  changeColor = () => {
    var letters = '0123456789ABCDE';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    this.setState({button: color})
  };
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text style={{ marginTop: 50, marginLeft: 170 }}>
          {this.state.counter}
        </Text>
        <Button
          title="By clicking on this button, the color of this button will change. Try it!"
          style={{ color: this.state.buttonColor }}
          onPress={this.incrimentCounter}></Button>
      </View>
    );
  }
}

I made a function called changeColor and in that I have made different variables such as letters, and color. I have to randomly generate a hexadecimal number such as #191970. When the button is clicked, the button's color will change with the random color that is generated.

However, the code is not working.

Code for reference:

https://snack.expo.io/@therealsneh/random-color-button

Thanks!

expo react-native button javascript
2 Answers

You just simply need to call the changeColor method when the button is pressed. So instead if this

onPress={this.incrimentCounter}

You need to do this

onPress={() => {
this.incrimentCounter();
this.changeColor();
}}

By the way, inside changeColor method, you are using this.setState({button: color}) but while styling the button you are using this.state.buttonColor. This should be this.state.button or this.setState({buttonColor: color})

One more thing, if you are using the Button of react-native, you should give the color as a prop instead of style like this

  <Button
          title="Click"
          color={this.state.buttonColor}

Also, you have one more bug in your code. letters length is 15 and your randomizing method can be 15. letters[15] will return undefined. Either add F to the letters or modify 16 to 15.

user_73570970

Try this code:

import React, { Component } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0,
      buttonColor: 'blue',
    };
  }
  componentDidMount() {
    setInterval(this.incrimentCounter, 100000000000);
  }
  incrimentCounter = () => {
    this.setState({ counter: this.state.counter + 1 });
    var letters = '0123456789ABCDE';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    this.setState({buttonColor: color})
  };
  componentDidUpdate() {
    console.log('Counter value has changed');
  }
  
  
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text style={{ marginTop: 50, marginLeft: 170 }}>
          {this.state.counter}
        </Text>
        <Button
          title="Click"
          color={this.state.buttonColor}
          onPress={this.incrimentCounter}></Button>
      </View>
    );
  }
}
user_111860830
Related