Button Changes color when it is clicked

user_14517971 0
Viewed 214

I am currently using react-native. My goal is to make the button's color a random color whenever it is clicked.

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 = "#"
    
  };
  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.changeColour}></Button>
      </View>
    );
  }
}

Here's the snack for reference. https://snack.expo.io/@therealsneh/df3efe I have an arrow function on line number 21 called "changeColor". I have defined 2 variables, letters, and hexaDecimalHash. Using those two variables I will be able to create a random hexadecimal like for example #4934eb. Using this random hexadecimal color, the button will look like that. Thanks!

expo react-native reactjs button javascript
2 Answers

Try like this. I think it can work for you.

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 = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    if(color==="#FFFFFF") return;
    this.setState({
      buttonColor:color
   })
    
  };
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text style={{ marginTop: 50, marginLeft: 170 }}>
          {this.state.counter}
        </Text>
        <Button
          title="Click"
          style={{color:this.state.buttonColor}}
          onPress={this.changeColor}></Button>
      </View>
    );
  }
}

Well it works in here https://snack.expo.io/AfmXSZ9R1

user_155795730

Generate random number and push it into color and then append the Hash + color

Demo

changeColor = () => {
  var letters = '0123456789ABCDE'.split("");
  var hexaDecimalHash = "#";
  const color = [];
  while (color.length !== 6) {
    color.push(letters[Math.floor(Math.random() * letters.length + 1)])
  }
  this.setState({
    buttonColor: `${hexaDecimalHash}${color.join("")}`
  })
};

user_91534480
Related