Instead of storing values to local storage want to store values in Redux how can i Do?

user_19023518 0
Viewed 44

Hello I am using class component in react JS.Instead of storing values to local storage store values in Redux how can i Do?How can we implement this in react JS. Below I am sharing my code.Please check my where I am doing wrong?

import React, {Component} from 'react';
import Header from '../Header';
import {connect} from 'react-redux';


class Step5 extends Component {

    constructor(){
        super()
        this.state = {estimated:'1-2'}
        this.handleChange  = this.handleChange.bind(this);
        this.handleSubmit  = this.handleSubmit.bind(this);
    }
    handleChange(event) {
        const { estimated, value } = event.target;
        console.log('JJF',event.target.value)
        this.setState({
            selectedOption: event.target.value
        });
      };
      handleSubmit = (e) => {
        e.preventDefault();
         var step5  =  this.state.estimated;
        
         console.log('estimated', JSON.stringify(step5))
         console.log('step5',step5);
         localStorage.setItem('step5', step5);
        const data = {
           id: new Date(),
           step5:step5
        }
        
        this.props.dispatch({type:'ADD_STEP5',data});
        window.open("/Step6" , "_self");  
     }

      
    render(){
        const {value} =this.state;
        return(  
            <div>
            <Header />           
              <section className="planing_outer">
                <form onSubmit={this.handleSubmit}>
                    <h1>{value} fff</h1>
                    <div className="container">
                        <div className="inner_heading">
                            <h4>How big is your event?</h4>
                        </div>   
                        <div className="row">  
                    <div className="col-lg-8 offset-lg-2">
                        <div className="text_outer"># of Estimated Attendees</div>
                        <div className="row">
                        <div className="col-lg-4 col-md-4">
                            <div className="even_box1">
                            <input type="radio" className="ischeck" id="flexCheckDefault" checked={this.state.selectedOption==="1-20"} value="1-20" name="estimated" onChange={this.handleChange}/><h3>1-20</h3>
                                    
                            </div>
                        </div> 
                        <div className="col-lg-4 col-md-4">
                            <div className="even_box1">
                            <input type="radio" className="ischeck" id="flexCheckDefault" checked={this.state.selectedOption==="21-50"} value="21-50" name="estimated" onChange={this.handleChange}/><h3>21-50</h3>
                                    
                            </div>
                        </div>
                        <div className="col-lg-4 col-md-4">
                            <div className="even_box1">
                            <input type="radio" className="ischeck" id="flexCheckDefault" value="50+" checked={this.state.selectedOption==="50+"} name="estimated" onChange={this.handleChange}/><h3>50+</h3>
                                    
                            </div>
                        </div>
                        
                        </div>   
                        <div className="text_outer atten">You can always edit it later</div>            
                        <div className="btn_outer">
                            
                        <button type='submit' className='btn btn-primary'> Continue </button>
                        {/* <button type='submit' className='btn btn-primary' disabled={btnDisabled}  onClick={redirectNewStep}> Continue </button> */}
                        {/* <a href="Step6" type="button" className="btn btn-primary">Continue</a> */}
                        </div>
                    </div>  
                        </div>
                    </div>
                </form>
              </section>
             
            </div>
            )
            
    } 

}
export default connect()(Step5);

In this I am using radio button on submit how we check radio button is checked not. If check store their value in redux and local storage .

reactjs
2 Answers

You are storing your selected value in selectedOption, retrieving that state in hadleSubmit should work fine:

  handleSubmit = (e) => {
    e.preventDefault();
    
    const selected = this.state.selectedOption;
    if (!selected) {
        alert('Please select an estimate')
        return
    }
    localStorage.setItem('step5', selected);
    const data = {
      id: new Date(),
      step5: selected,
    };

    this.props.dispatch({ type: 'ADD_STEP5', data });
    window.open('/Step6', '_self');
  };
user_132112630

You are setting the value of selected radio button in the state variable selectedOption. You are assigning event.target.value to selectedOption, so selectedOption will either have value '21-50' or '50+' You just need to check if selectedOption is defined in your handleSubmit function

handleSubmit = (e) => {
    e.preventDefault();
    var step5  =  this.state.selectedOption;
    if(step5)
         localStorage.setItem('step5', step5);
    const data = {
        id: new Date(),
        step5:step5
    }
    this.props.dispatch({type:'ADD_STEP5',data});
    window.open("/Step6" , "_self");  
}
user_100485310
Related