Editing of array in reactjs





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







-2















I am trying to edit my list in an array but it doesn't work.



I am trying the single input value update it works but I don't know how to
update the array.



why this method was not working, and give the solution for the array edit



I store the data from the array but it says [object object] what can I do?



state={
name:'Ajith',
name1: 'kumar',
name2 : ,
changeEdit:false
}

edit = () => {
this.setState({
changeEdit : !this.state.changeEdit
});
let array = {
name : this.state.name,
name1 : this.state.name1
};
let Name = this.state.name2;
Name.push(array);
this.setState({
name2 : Name
})
console.log(this.state.name2)
}

update = (e) => {
this.setState({
changeEdit : !this.state.changeEdit,
name : this.refs.Edit.value,
name1 : this.refs.Edit1.value,
name2 : this.refs.Edit2.value
})

}

inputEditEvent = (e) => {
return(
<div


<div>
<input type="text" defaultValue={this.state.name} ref = "Edit" style={{height:'30px'}}/>
<input type="text" defaultValue={this.state.name1} ref = "Edit1" style={{height:'30px'}}/>
<input type="text" defaultValue={this.state.name2} ref = "Edit2" style={{height:'30px'}}/>
</div>
<div>
<Editings cancel={this.edit} update={this.update}/>
</div>
</div>
)
}

editEvent = (e) => {
return(
<div>
<button onClick={this.edit}>
Edit
</button>
<h2>
{this.state.name}<br/>
{this.state.name}<br/>
<br/>
{this.state.name}
</h2>
</div>
)
}
render()
{
return this.state.changeEdit ?
this.inputEditEvent() : this.editEvent()
}


}










share|improve this question































    -2















    I am trying to edit my list in an array but it doesn't work.



    I am trying the single input value update it works but I don't know how to
    update the array.



    why this method was not working, and give the solution for the array edit



    I store the data from the array but it says [object object] what can I do?



    state={
    name:'Ajith',
    name1: 'kumar',
    name2 : ,
    changeEdit:false
    }

    edit = () => {
    this.setState({
    changeEdit : !this.state.changeEdit
    });
    let array = {
    name : this.state.name,
    name1 : this.state.name1
    };
    let Name = this.state.name2;
    Name.push(array);
    this.setState({
    name2 : Name
    })
    console.log(this.state.name2)
    }

    update = (e) => {
    this.setState({
    changeEdit : !this.state.changeEdit,
    name : this.refs.Edit.value,
    name1 : this.refs.Edit1.value,
    name2 : this.refs.Edit2.value
    })

    }

    inputEditEvent = (e) => {
    return(
    <div


    <div>
    <input type="text" defaultValue={this.state.name} ref = "Edit" style={{height:'30px'}}/>
    <input type="text" defaultValue={this.state.name1} ref = "Edit1" style={{height:'30px'}}/>
    <input type="text" defaultValue={this.state.name2} ref = "Edit2" style={{height:'30px'}}/>
    </div>
    <div>
    <Editings cancel={this.edit} update={this.update}/>
    </div>
    </div>
    )
    }

    editEvent = (e) => {
    return(
    <div>
    <button onClick={this.edit}>
    Edit
    </button>
    <h2>
    {this.state.name}<br/>
    {this.state.name}<br/>
    <br/>
    {this.state.name}
    </h2>
    </div>
    )
    }
    render()
    {
    return this.state.changeEdit ?
    this.inputEditEvent() : this.editEvent()
    }


    }










    share|improve this question



























      -2












      -2








      -2








      I am trying to edit my list in an array but it doesn't work.



      I am trying the single input value update it works but I don't know how to
      update the array.



      why this method was not working, and give the solution for the array edit



      I store the data from the array but it says [object object] what can I do?



      state={
      name:'Ajith',
      name1: 'kumar',
      name2 : ,
      changeEdit:false
      }

      edit = () => {
      this.setState({
      changeEdit : !this.state.changeEdit
      });
      let array = {
      name : this.state.name,
      name1 : this.state.name1
      };
      let Name = this.state.name2;
      Name.push(array);
      this.setState({
      name2 : Name
      })
      console.log(this.state.name2)
      }

      update = (e) => {
      this.setState({
      changeEdit : !this.state.changeEdit,
      name : this.refs.Edit.value,
      name1 : this.refs.Edit1.value,
      name2 : this.refs.Edit2.value
      })

      }

      inputEditEvent = (e) => {
      return(
      <div


      <div>
      <input type="text" defaultValue={this.state.name} ref = "Edit" style={{height:'30px'}}/>
      <input type="text" defaultValue={this.state.name1} ref = "Edit1" style={{height:'30px'}}/>
      <input type="text" defaultValue={this.state.name2} ref = "Edit2" style={{height:'30px'}}/>
      </div>
      <div>
      <Editings cancel={this.edit} update={this.update}/>
      </div>
      </div>
      )
      }

      editEvent = (e) => {
      return(
      <div>
      <button onClick={this.edit}>
      Edit
      </button>
      <h2>
      {this.state.name}<br/>
      {this.state.name}<br/>
      <br/>
      {this.state.name}
      </h2>
      </div>
      )
      }
      render()
      {
      return this.state.changeEdit ?
      this.inputEditEvent() : this.editEvent()
      }


      }










      share|improve this question
















      I am trying to edit my list in an array but it doesn't work.



      I am trying the single input value update it works but I don't know how to
      update the array.



      why this method was not working, and give the solution for the array edit



      I store the data from the array but it says [object object] what can I do?



      state={
      name:'Ajith',
      name1: 'kumar',
      name2 : ,
      changeEdit:false
      }

      edit = () => {
      this.setState({
      changeEdit : !this.state.changeEdit
      });
      let array = {
      name : this.state.name,
      name1 : this.state.name1
      };
      let Name = this.state.name2;
      Name.push(array);
      this.setState({
      name2 : Name
      })
      console.log(this.state.name2)
      }

      update = (e) => {
      this.setState({
      changeEdit : !this.state.changeEdit,
      name : this.refs.Edit.value,
      name1 : this.refs.Edit1.value,
      name2 : this.refs.Edit2.value
      })

      }

      inputEditEvent = (e) => {
      return(
      <div


      <div>
      <input type="text" defaultValue={this.state.name} ref = "Edit" style={{height:'30px'}}/>
      <input type="text" defaultValue={this.state.name1} ref = "Edit1" style={{height:'30px'}}/>
      <input type="text" defaultValue={this.state.name2} ref = "Edit2" style={{height:'30px'}}/>
      </div>
      <div>
      <Editings cancel={this.edit} update={this.update}/>
      </div>
      </div>
      )
      }

      editEvent = (e) => {
      return(
      <div>
      <button onClick={this.edit}>
      Edit
      </button>
      <h2>
      {this.state.name}<br/>
      {this.state.name}<br/>
      <br/>
      {this.state.name}
      </h2>
      </div>
      )
      }
      render()
      {
      return this.state.changeEdit ?
      this.inputEditEvent() : this.editEvent()
      }


      }







      javascript reactjs






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 3 at 17:41









      Emile Bergeron

      10.8k44673




      10.8k44673










      asked Jan 3 at 16:16









      Abinash MAbinash M

      11




      11
























          1 Answer
          1






          active

          oldest

          votes


















          1














          This is not an array, is an object



          let array = {
          name : this.state.name,
          name1 : this.state.name1
          };


          This is an array



          let array = [
          {name : this.state.name },
          {name1 : this.state.name1 },
          ];


          Also notice setState is async:



          this.setState({
          name2 : Name // next value
          })
          console.log(this.state.name2) // will print previous value


          Correct way to log state:



          this.setState({
          name2 : Name // next state
          },
          () => console.log(this.state.name2) // next state
          );





          share|improve this answer


























          • after that it not working

            – Abinash M
            Jan 3 at 16:23











          • This is not an edit for your code, I'm pointing out a misunderstood of data types

            – Mosè Raguzzini
            Jan 3 at 16:24











          • okay thanks bro

            – Abinash M
            Jan 3 at 16:27












          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54026038%2fediting-of-array-in-reactjs%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          This is not an array, is an object



          let array = {
          name : this.state.name,
          name1 : this.state.name1
          };


          This is an array



          let array = [
          {name : this.state.name },
          {name1 : this.state.name1 },
          ];


          Also notice setState is async:



          this.setState({
          name2 : Name // next value
          })
          console.log(this.state.name2) // will print previous value


          Correct way to log state:



          this.setState({
          name2 : Name // next state
          },
          () => console.log(this.state.name2) // next state
          );





          share|improve this answer


























          • after that it not working

            – Abinash M
            Jan 3 at 16:23











          • This is not an edit for your code, I'm pointing out a misunderstood of data types

            – Mosè Raguzzini
            Jan 3 at 16:24











          • okay thanks bro

            – Abinash M
            Jan 3 at 16:27
















          1














          This is not an array, is an object



          let array = {
          name : this.state.name,
          name1 : this.state.name1
          };


          This is an array



          let array = [
          {name : this.state.name },
          {name1 : this.state.name1 },
          ];


          Also notice setState is async:



          this.setState({
          name2 : Name // next value
          })
          console.log(this.state.name2) // will print previous value


          Correct way to log state:



          this.setState({
          name2 : Name // next state
          },
          () => console.log(this.state.name2) // next state
          );





          share|improve this answer


























          • after that it not working

            – Abinash M
            Jan 3 at 16:23











          • This is not an edit for your code, I'm pointing out a misunderstood of data types

            – Mosè Raguzzini
            Jan 3 at 16:24











          • okay thanks bro

            – Abinash M
            Jan 3 at 16:27














          1












          1








          1







          This is not an array, is an object



          let array = {
          name : this.state.name,
          name1 : this.state.name1
          };


          This is an array



          let array = [
          {name : this.state.name },
          {name1 : this.state.name1 },
          ];


          Also notice setState is async:



          this.setState({
          name2 : Name // next value
          })
          console.log(this.state.name2) // will print previous value


          Correct way to log state:



          this.setState({
          name2 : Name // next state
          },
          () => console.log(this.state.name2) // next state
          );





          share|improve this answer















          This is not an array, is an object



          let array = {
          name : this.state.name,
          name1 : this.state.name1
          };


          This is an array



          let array = [
          {name : this.state.name },
          {name1 : this.state.name1 },
          ];


          Also notice setState is async:



          this.setState({
          name2 : Name // next value
          })
          console.log(this.state.name2) // will print previous value


          Correct way to log state:



          this.setState({
          name2 : Name // next state
          },
          () => console.log(this.state.name2) // next state
          );






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jan 3 at 16:27

























          answered Jan 3 at 16:19









          Mosè RaguzziniMosè Raguzzini

          4,7601226




          4,7601226













          • after that it not working

            – Abinash M
            Jan 3 at 16:23











          • This is not an edit for your code, I'm pointing out a misunderstood of data types

            – Mosè Raguzzini
            Jan 3 at 16:24











          • okay thanks bro

            – Abinash M
            Jan 3 at 16:27



















          • after that it not working

            – Abinash M
            Jan 3 at 16:23











          • This is not an edit for your code, I'm pointing out a misunderstood of data types

            – Mosè Raguzzini
            Jan 3 at 16:24











          • okay thanks bro

            – Abinash M
            Jan 3 at 16:27

















          after that it not working

          – Abinash M
          Jan 3 at 16:23





          after that it not working

          – Abinash M
          Jan 3 at 16:23













          This is not an edit for your code, I'm pointing out a misunderstood of data types

          – Mosè Raguzzini
          Jan 3 at 16:24





          This is not an edit for your code, I'm pointing out a misunderstood of data types

          – Mosè Raguzzini
          Jan 3 at 16:24













          okay thanks bro

          – Abinash M
          Jan 3 at 16:27





          okay thanks bro

          – Abinash M
          Jan 3 at 16:27




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54026038%2fediting-of-array-in-reactjs%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          'app-layout' is not a known element: how to share Component with different Modules

          android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

          WPF add header to Image with URL pettitions [duplicate]