1

Below is my state object

{
   "customerdata":[
      {
         "name":"COMPANYNAME",
         "title":"Company Name",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"CONTACT_FULL_NAME",
         "title":"Contact Name",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"PHONENUMBER",
         "title":"Phone Number",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"INDUSTRYTYPE",
         "title":"Industry Type",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"ADDRESS_CITY",
         "title":"Address City",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"FOLLOWUP",
         "title":"Follow Up",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"IID",
         "title":"IID",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"HASMORELINKS",
         "title":"Has More Links",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"ISNEWOREDITED",
         "title":"Is Now Order",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      },
      {
         "name":"BASECURRENCYIID",
         "title":"Base Currency",
         "isvisible":false,
         "Attrib":{
            "caption":"",
            "TextWrap":"",
            "Bold":false,
            "Italic":false,
            "Font Name":"",
            "FontSize":"",
            "FontColor":"",
            "BackGroundColor":"",
            "Height":"",
            "Width":""
         }
      }
   ],
   "isAttrcall":true,
   "linedata":{
      "name":"COMPANYNAME",
      "title":"Company Name",
      "isvisible":false,
      "Attrib":{
         "caption":"",
         "TextWrap":"",
         "Bold":false,
         "Italic":false,
         "Font Name":"",
         "FontSize":"",
         "FontColor":"",
         "BackGroundColor":"",
         "Height":"",
         "Width":""
      }
   }
}

I am passing one 0th index data to another component, there I am updating the value and return the updated value back to main component.

{
   "name":"COMPANYNAME",
   "title":"Company Name",
   "isvisible":false,
   "Attrib":{
      "caption":"adasd",
      "TextWrap":"",
      "Bold":false,
      "Italic":false,
      "Font Name":"",
      "FontSize":"",
      "FontColor":"",
      "BackGroundColor":"",
      "Height":"",
      "Width":""
   }
}

how i can update back the main state?

in this example I updated caption to 'adasd'.

help needed...

i tried to print the console log in main component i can see the values.

this is the data from child component

{
  "_state": {
    "data": {
      "linedata": {
        "name": "COMPANYNAME",
        "title": "Company Name",
        "isvisible": false,
        "Attrib": {
          "caption": "adasd",
          "TextWrap": "",
          "Bold": false,
          "Italic": false,
          "Font Name": "",
          "FontSize": "",
          "FontColor": "",
          "BackGroundColor": "",
          "Height": "",
          "Width": ""
        }
      }
    }
  }
 }
Alexandre Tranchant
  • 4,426
  • 4
  • 43
  • 70
Bhaskar
  • 13
  • 1
  • 4
  • Welcome to stackoverflow. Please show us what you have tried so far to update the state. – Björn Böing May 02 '19 at 11:23
  • This is an indirect answer(*hints*), so you will have to google it. First take the state object and search for the necessary company. If exists, save it in a variable or update its caption and other properties as required. Then set this new/modifies state in setState and update the state. You will have to also consider cases where new company values are added. Note, make sure you use concept of immutability. Objects are copied using reference so it will have side-effect if used directly – Rajesh May 02 '19 at 11:25
  • Could you get rid of the array and restructure your state only as an object? I think it would make it easier to update the state. Check you my [question](https://stackoverflow.com/questions/54445040/whats-the-best-alternative-to-update-nested-react-state-property-with-setstate) on this subject – cbdeveloper May 02 '19 at 12:44

1 Answers1

0

You'll need to update the state using the prevState data and also remove the item you want to modify first from the list (filtering by name for instance). Something like this:

const updateStateFunction = (updatedLineData) => {
  this.setState(prevState => ({
    ...prevState,
    linedata: updatedLineData,
  }));
}
Jose A. Ayllón
  • 866
  • 6
  • 19
  • this.setState(prevState=>({...prevState,customerdata:{ ...prevState.cusomerdata[linedata1],Attrib:{ ...prevState.customerdata[linedata1].Attrib, "caption":"abcdf" } } } ) ) } this is the one i am doing in setState method – Bhaskar May 02 '19 at 14:41
  • I don't understand then what is what you want to achieve... What are both *customerdata* and *linedata* for? – Jose A. Ayllón May 02 '19 at 14:58
  • Customerdata is state object which contains all the data. One of the customer data is passed to another component(child component) child component update the value and on click the button in child component it will call the function in main component pass the updated value as _state (which contains the linedata) i want to update this updated line data to state object in main component. – Bhaskar May 02 '19 at 15:28
  • updateAttrvalue(_state){ var someproperty = {...this.state.customerdata[0]}; someproperty=JSON.parse(JSON.stringify(_state.data.linedata)) const linedata1 = this.state.customerdata.findIndex(u=>u.name===_state.data.linedata.name) var someproperty1 = {...this.state.customerdata[linedata1].Attrib}; this.setState(prevState=>({...prevState,customerdata:{ ...prevState.cusomerdata[linedata1],Attrib:{ ...prevState.customerdata[linedata1].Attrib, "caption":"abcdf" }} }))} – Bhaskar May 02 '19 at 15:41
  • Still very confused... If I did understand correctly you want to update the "linedata" key in your main state with a new object coming as parameter. I've updated the function above: you receive **updatedLineData** which is the updated data coming from the child and then you assign that updatedLineData in the linedata of your main component. – Jose A. Ayllón May 02 '19 at 15:50
  • Thanks Jose. I modifed the program and i can able to get the required result. updateAttrvalue(_state){ const lineindex = this.state.customerdata.findIndex(u=>u.name===_state.data.linedata.name) var someproperty1 = {...this.state.customerdata}; let obj = this.state.customerdata; obj[lineindex ]=_state.data.linedata; this.setState({someproperty1:obj}) console.log(this.state);} what i am doing is correct or any other simple way i can do this....? – Bhaskar May 03 '19 at 09:03
  • If what you're doing works, I'll improve it with something like this: `updateAttrvalue = _state => { this.setState(prevState => ({ customerdata: prevState.customerdata.map(e => e.name === _state.data.linedata.name ? _state.data.linedata : e ), })); };` – Jose A. Ayllón May 03 '19 at 14:00