Creating a button that fills in React

Question

I'm new here and I have a question that I couldn't find answer to..

I am currently working on a website using ReactJS, and I want to have a button that fills itself whenever the user clicks on it. The button should have a total of 5 stages to it.

I am not asking for you to code it for me, but simply help me finding the best approach to this thing.

So what exactly am I asking? As you can see in this

image link

It's a boxed element that whenever the user clicks on it (it can click on the whole element), the progress fills and it becomes something like this

something like this

So the first line is now marked. When the user presses on it again, the 2nd bar fills

2nd bar fills

Important - there will be text inside these bars that fills.

What have I done so far? I have been thinking of having 5 different images for every time the user presses on the element, but I was wondering if there might be a better approach to it (Like having the DIV background the image, and have sub-divs that fills up whenever the user presses... )

I hope I made myself clear, and thank you all for your time!

user_8715585 · Answer

As you are using react. use create step/level as component and you will pass props of styles. you can map that component 5 times or n times depending upon requirement. The view you have shown no need images use css to achieve it.

change props of component when user click on it.

user_966798 · Answer

The key concept is state. When you click your button you should set some state, and when you render the button you should render it based on the state.

Here's a simple example where I render a button which contains 5 div elements that are filled (by setting backgroundColor style property) based on the state.

class Example extends Component {

    constructor(props) {
        super(props);

        this.state = {
            buttonState: 0,
        };
    }

    onClick = () => {
        let buttonState = this.state.buttonState;
        buttonState++;
        if(buttonState > 4) buttonState = 0; // wrap around from 4 - 0
        this.setState({buttonState: buttonState});
    }

    // render a button element with some text, and a background color based on whether filled is true/false
    renderButtonElement(elementText, filled) {
        const backgroundStyle = filled ? {backgroundColor: 'green'} : {backgroundColor: 'white'};
        const textStyle = {color: 'grey'};

        return(
            
                {elementText}
            
        );
    }

    render() {
        return(
            
        );
    }
}

user_7775915 · Answer

You can use state in order to keep the click count and change the button background on the basis of click count.

const colors = ["#dfddc7", "#f58b54", "#a34a28", "#211717"]; //color array
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index : 0
    }
  }
  handleChange() { // function will be called whenever we click on button
   let {index} = this.state;
   if (index >= 5) {
    return; // you don't want to change color after count 5
   }
   index++;
   console.log(index);
   this.setState({index})
  }
  render() {
   const {index} = this.state;
   return (
    
     
     
   );
  }
}

user_12031739 · Answer

Here is a working example. You don't need an image for all of the different states. It is far more flexible to do this dynamically with HTML.

The key to this is keeping track of the number of times the button has been clicked. In this example it uses currentState to keep track of how many times it has been clicked.

const defaultStyle = {
  width: 100,
  padding: 5,
};

class MultiLevelButton extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      currentState: 0,
    };
    
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    const { currentState } = this.state;
    
    if (currentState < this.props.states.length) {
      this.setState({
        currentState: currentState + 1,
      });
    }
  }
  
  reset() {
    this.setState({
      currentState: 0,
    });
  }
  
  render() {
    const { currentState } = this.state;
    const { states } = this.props;
    
    return (
      
    )
  }
}

const buttonRef = React.createRef();

ReactDOM.render(
  
    
    
    
      
    
  ,
  document.getElementById('app')
);

user_4245446 · Answer

You can place

inside a button with different background color instead of images.

In the following example, I hold the number of clicks in the state. By comparing this value with the index of the step, you can see if it needs to be green or transparent

const numberOfSteps = 5;
class App extends React.Component {
  state = {
    numberOfClicks: 0
  };

  handleClick = e => {
    this.setState({
      numberOfClicks: (this.state.numberOfClicks + 1) % (numberOfSteps + 1)
    }); // Use module (%) to reset the counter after 5 clicks
  };

  render() {
    const { numberOfClicks } = this.state;
    const steps = Array(numberOfSteps)
      .fill()
      .map((v, i) => i)
      .map((i, index) => {
        const color = numberOfClicks >= index + 1 ? "limegreen" : "transparent";
        return (
          
            Bar {index + 1}
          
        );
      });
    return (
      
    );
  }
}

ReactDOM.render(, document.getElementById("root"));

Creating a button that fills in React

5 Answers