CODEWITHSUNDEEP
reactjsstate
jack
jack

Reputation: 391

saving all state value at once

I am trying to store 3 different state value (category,subcategory,squarefeet) at once in a single state and save them together in a database.I have 3 different functions for 3 different state.Right now i made 3 axios request for 3 different funtions:

 this.state = {
    apiUrl: config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl, 
    categoryName:'',
    subCategoryName:'',
    squareFeet:'',

};


saveValue = (e) => {
    console.log('savecategory', e.target.innerHTML);

    this.setState({
        category: e.target.innerHTML
    }, this.makingAxiosRequest);

};

makingAxiosRequest = () => {
    axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
        'categoryName':this.state.category,
    }, {})
};
savedValue = (e) => {
    // console.log('savecategory', e.target.innerHTML);

    this.setState({
        subCategory: e.target.innerHTML
    }, this.makeAxiosRequest);

};

makeAxiosRequest = () => {
    axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
        'subCategoryName':this.state.subCategory,
    }, {})
};



handleChange = value => {
    this.setState({
        value: value
    })
};

savingValue = () => {
    console.log('saveValue ...', this.state);


    axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
        'squareFeet':this.state.value,



    }

But I am not being able to pass all this value in last state and save it at once.

Upvotes: 1

Views: 72

Answers (2)

jank
jank

Reputation: 870

Provide name property to your input or what you are using, then call onChange(e) passing event property and get the name, value properties from event and set it to the state like following:

class Thingy extends React.Component {

  constructor(props) {
    super(props)
    this.state = {};
  }
  
  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }
  
  render() {
    const {title} = this.props;
    return (
      <div>
        name
        <input name='name' onChange={(e) => this.onChange(e)}/>
        age
        <input name='age' onChange={(e) => this.onChange(e)}/>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy />,
  document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Upvotes: 0

TRomesh
TRomesh

Reputation: 4481

Check whether you are passing the correct state names. Try something like this

axios.post(this.state.apiUrl+'/api/v1/LeadSurvey/save', {'categoryName':this.state.categoryName,subCategoryName:this.state.subCategoryName,'squareFeet':this.state.squareFeet});

pass all the state data at once instead of 3 different calls. If those 3 values are taken from input fields you can bind the values with the state like this.

onChange=(e,{name,value})=>{
  this.setState({[name]:value});
}

<input name="categoryName" onChange={this.onChange}/>

Upvotes: 2

Related Questions