Coders Packet

Simple Voting Web Application using states in ReactJS

By Abhijeet Verma

A simple Voting App using React js that will help you to understand how to use state in ReactJS. Here we will make simple voting for the cars. After this project, you will be able to make your own.

Hello learners!

In this project, we will learn how to make a simple voting web application using states in ReactJS.

Here for CSS, I have used semantic UI so the class names are according to that you can use any CSS of your own choice.

 

The first most important point to keep in mind when using state in react is-

When initially we initial our state with some values then we use this.state={};

and when at some point we have to change this state then we use this.setState=({});

 

so now we will first se how we will add data to our state.

here is the index.js file in which we initailize our state with different values and then pass it to the reusable component(One of the best feature of react js is reusable components we can make use of same component by just changing the props)

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Cars from './Cars';
import Dialog from './Dialog';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            one: {
                name: "Lamborgini",
                image:"lambo.jpg",
                model: "Aventador RoadSter",
                about: "One of the best Cars of this generation.",
                votes: 0
            },
            two:
            {
                name: "Porsche",
                image: "porsche.jpg",
                model: "911 Turbo S",
                about: "Beautiful and Classy, What else you need!!",
                votes: 0

            },
            three: {
                name: "Ferrari",
                image: "ferrari.jpg",
                model: "Ferrari F8",
                about: "Wooo!!What a Car,It's Just Perfect! ",
                votes: 0
            },
            winner: '',
            result: false
            
            
        }
    }
    render() {
        return (
{/**/}
            
            );
        
    }
    
    ShowResult = (event) => {
        event.preventDefault();
        const large = Number(this.state.one.votes) > Number(this.state.two.votes) ? (Number(this.state.one.votes) > Number(this.state.three.votes) ? "one" : "three") : (Number(this.state.two.votes) > Number(this.state.three.votes) ? "two" : "three");
        this.setState({ winner: { large }, result:true });
        console.log(this.state.winner.large);

        console.log(large);
    }
    getValueone=(a)=> {
        console.log(a);
       
        this.setState({
            one: {
                name: "Lamborgini",
                image: "lambo.jpg",
                model: "Aventador RoadSter",
                about: "One of the best Cars of this generation.",
                votes: a
            }
            });
        
       // console.log(this.state.showit);
    }
    
    getValuetwo = (a) => {
        console.log(a);

        this.setState({
            two: {
                name: "Porsche",
                image: "porsche.jpg",
                model: "911 Turbo S",
                about: "Beautiful and Classy, What else you need!!",
                votes: a
            }
        });

        // console.log(this.state.showit);
    }
    getValuethree = (a) => {
        console.log(a);

        this.setState({
            three: {
                name: "Ferrari",
                image: "ferrari.jpg",
                model: "Ferrari F8",
                about: "Wooo!!What a Car,It's Just Perfect! ",
                votes: a
            }
        });

        // console.log(this.state.showit);
    }
}
const Winner = (props) => {
    if (props.result)
        return

Congratulations, Winner is {props.winner}!!!

    else
        return
 
}


ReactDOM.render(, document.querySelector('#root'));

 

 

so now as we have added everything to our state now we can pass these values to our reusable component as you can see here Cars is the reusable component.

here is our Cars.js file

cars.js

import React from 'react';
import Dialog from './Dialog';

class Cars extends React.Component {
    constructor(props) {
        super(props);
        this.state = { showdialog: false};


    }
    render() {

        return (
 
{this.props.header}
{this.props.model}
{this.props.about}

{this.props.votes} Votes

);
    }


                
             
                
           
                
                



      
    Dialog = (event) => {
        event.preventDefault();
        console.log(13131);
       
        const a = this.props.votes + 1;
        this.setState({ showdialog: true });
        //this.props.onDone(this.state.showstate);
        this.props.onDone(a);
    }
}



export default Cars;

 

 

 

Be sure to export your component at last as we have to import it in our index.js file

now we need a component to render when we click on vote button that will show "Thanks for vote" or something like that for this we will use a different component.This is in dialog.js

dialog.js

import React from 'react';


class Dialog extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    console.log(313123);
    if (this.props.showdialog) {
      return (
Hey!Thanks for your Vote
      );
    }
    else {
      return (
 
);

      

    }



  }
}
  
  

export default Dialog;

 

Be sure to export the Dialog component from here as we have to import it in Cars component.

As you can see I have used console.log() at a lot of times and actually it's a good practice as it helps us to debug our code properly.

Thank You,I hope you all understood the concept and can make simple voting web applications like this.

 

Download Complete Code

Comments

No comments yet